我试图建立一个网站,在那里用户可以拖动一些项目(在div上的一个项目)到其他div页面上。它不是一个表格,而是页面上的某个div。
通过html5拖放,它工作得很好,现在我尝试在移动设备上做这件事。我可以将项目拖到div中,将它们放在那里并阻止这个dropzone,因为一个dropzone中应该只有一个元素。如果我犯了一个错误,我也可以将这个元素拖到另一个div或页面上的其他地方(可拖放区域只在第一次拖放div时起作用),但之后我不能再拖放div中的另一个项目,它现在又是空的。
如何再次启用此Dropzone中的拖放功能?
如果一个div被拖到另一个div上,那么两个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
https://stackoverflow.com/questions/15343385
复制相似问题