CODEWITHSUNDEEP
jquery-uidrag-and-dropjquery-ui-sortable
2bitcoder
2bitcoder

Reputation: 73

jquery-ui drag and drop across multiple divs with sort

I'm trying to create a jquery drag and drop solution and am a little lost with how I achieve the following.

  1. Allow '.todo-task' to be dropped into any of the 4 'backlog, pending, inProgress, completed' div containers.

  2. Use a highlight helper to show where the task will be placed in the container.

  3. Be able to drag and drop with in a container to change to order.

my first issue is that I cannot seem to be able to activate the drag items correctly.

I have created a jsfiddle with the code I have so far. Appreciate any guidance / help

here is my jquery code

 $(".task-container").contents().find(".todo-task").draggable({
    connectToSortable: ".ui-droppable",
    helper: function (event) {

    },
    iframeFix: true,
    // stop: makeSortable()
    stop: function (event, ui) {
      //  alert('stop');
    }
});   

$(".ui-droppable").sortable({
    placeholder: "ui-state-highlight",
    opacity: .5,
    //dropOnEmpty: true,
    helper: 'original',
    beforeStop: function (event, ui) {
     newItem = ui.item;
    },
    receive: function (event, ui) {

    },

}).disableSelection().droppable({
    over: ".ui-droppable",
    activeClass: 'highlight',
    drop: function (event, ui) {
        $(this).addClass("ui-state-highlight");

    }
})

Upvotes: 2

Views: 6469

Answers (1)

bazeblackwood
bazeblackwood

Reputation: 1204

I'm not sure exactly what else you're trying to achieve in terms of the "disabled" style CSS, but I just forked and monkeyed around with this for a minute:

jsfiddle

One thing is that I think your jQuery methods are redundant. Why say:

$(".task-container").contents().find(".todo-task").draggable( ...etc.

When you can just as easily do this:

$(".todo-task").draggable( ...etc.

So I cleaned a little bit of that up.

The other thing I did was to make the .task-container droppable.

See the jQuery API: droppable methods

This allows you to sort and move between columns, but like I mentioned this fix seems to behave strangely with your CSS class methods.

Upvotes: 4

Related Questions