Невозможно повторно включить droppable после его отключения. ⇐ Jquery

[Anonymous]

Невозможно повторно включить droppable после его отключения
Я хочу создать перетаскиваемые элементы div, которые можно будет перетаскивать в пустые родительские элементы div. Каждый родитель может принять только один перетаскиваемый объект. Для этого я отключаю возможность перетаскивания после того, как перетаскиваемый объект был удален. Однако, когда я перемещаю перетаскиваемый объект из отбрасываемого, попытка его повторного включения приводит к сбою моего скрипта.
В приведенном ниже коде я должен иметь возможность перетаскивать серые поля в зеленое поле. . При перетаскивании предыдущее поле должно стать зеленым, а затем принять другое серое поле.
В приведенном ниже коде команда, вызывающая нарушение, закомментирована.

Код: Выделить всё

$(document).ready(function () {
$(".draggable").draggable({
start: function(event, ui){
// Line below causes a script error
//    $(this).parent().droppable('enable');
},
revert: "invalid",
helper: "original",
zIndex: 100
});

$(".accept").droppable({
accept: ".draggable",
drop: function (event, ui) {
$(this).append(ui.helper);
$(this).droppable('disable');
ui.draggable.position({
of: $(this),
my: 'left+1 top+1',
at: 'left top'
});
}
});
});

Код: Выделить всё

body {
height: 100vh;
margin: 0;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin-right: 10px;
overflow: hidden;
float: left;
background-color: #0f0;
}
.ui-droppable-disabled {
background-color: #f00;
}
.draggable {
width: 98px;
height: 88px;
cursor: move;
border: 1px solid #999;
margin-bottom: 10px;
background-color: #f0f0f0;
float: left;
}

Код: Выделить всё

Drag me 1!




Drag me 2!




Drag me 3!

Как повторно включить возможность перетаскивания в родительском элементе div при перемещении перетаскиваемого объекта? от него?
Кроме того, как я могу заставить перетаскиваемый объект появляться поверх перетаскиваемого объекта, а не внутри него?

Подробнее здесь: https://stackoverflow.com/questions/784 ... sabling-it