使用jquery更改div的位置拖放
使用jquery更改div的位置拖放
提问于 2013-03-12 00:14:28
我试图建立一个网站，在那里用户可以拖动一些项目(在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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15343385
复制相关文章
相似问题