Я пытаюсь создать сайт, на котором пользователь может перетащить некоторые элементы (один элемент в div) в другие div на странице. Это не таблица или так, просто divs где-то на странице.
С html5 drag & drop оно работает хорошо, теперь я пытаюсь сделать это для мобильных устройств. Я могу перетаскивать элементы в div, отбрасывать их и блокировать эту dropzone, потому что только один элемент должен находиться в dropzone. Я также могу перетащить этот элемент в другой div или где-нибудь еще на странице (отбрасываемые области работают только при первом отключении div), если я совершил ошибку, но тогда я не могу отбросить еще один элемент в div, который теперь пуст еще раз.
Как я могу включить сброс в этой Dropzone снова?
И можно ли изменить положение двух div, если один перетаскивается на другой?
Вот соответствующая часть моего кода:
<script type="text/javascript">
$ (init);
function init() {
$(".dragzones").draggable({
start: handleDragStart,
cursor: 'move',
revert: "invalid",
});
$(".dropzones").droppable({
drop: handleDropEvent,
tolerance: "touch",
});
}
function handleDragStart (event, ui) {}
function handleDropEvent (event, ui) {
$(this).droppable('disable');
ui.draggable.position({of: $(this), my: 'left top', at: 'left top'});
ui.draggable.draggable('option', 'revert', "invalid");
}
</script>
<body>
<div id="alles">
<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
<div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
<div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
<div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
<div class="dropzones" id="zone11"></div>
<div class="dropzones" id="zone12"></div>
<div class="dropzones" id="zone13"></div>
<div class="dropzones" id="zone14"></div>
</div>
</body>
EDIT: Вот рабочая страница: Drag & Drop Task
