jquery-UI перетащить через несколько Div с сортировкой

Question

Я пытаюсь создать решение jquery для перетаскивания, и я немного растерялся, пытаясь достичь следующего.

1. Разрешить удаление ".todo-task" в любой из 4 "контейнеров невыполненных работ, ожидающих inProgress, complete".

2. Используйте помощник выделения, чтобы показать, где задача будет размещена в контейнере.

3. Иметь возможность перетаскивать в контейнере, чтобы изменить порядок.

Моя первая проблема заключается в том, что я не могу правильно активировать элементы перетаскивания.

Я создал jsfiddle с кодом, который у меня есть до сих пор. Ценю любое руководство / помощь

вот мой код JQuery

 $(".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");

    }
})

Answer 1

Я не уверен, чего именно вы пытаетесь достичь с помощью CSS в стиле "отключен", но я просто раздувал и разбирался с этим на минуту:

jsfiddle

Во-первых, я думаю, что ваши методы jQuery избыточны. Почему говорят:

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

Когда вы можете так же легко сделать это:

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

Так что я немного почистил это.

Другая вещь, которую я сделал, чтобы сделать .task-containerdroppable,

Посмотрите API jQuery: методы отбрасывания

Это позволяет сортировать и перемещаться между столбцами, но, как я уже говорил, это исправление выглядит странно с вашими методами класса CSS.