我正在尝试建立一个网站,用户可以在其中将一些项目(div 中的一个项目)拖动到页面上的其他 div。它不是表格左右,只是页面上某处的 div。
使用 html5 拖放效果很好,现在我尝试为移动设备执行此操作。我可以将项目拖到 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>
编辑:这是现在工作的页面:Drag&Drop Task