jQuery 拖拽再次放下并拖动
我正在研究拖放放置页面，您可以在其中将列表中的元素拖动到各种可放置容器中。这非常有效。我现在想要实现的目标是能够将它们从一个容器拖动到另一个容器（或在容器内重新排序它们）。但我似乎无法做到这一点。
该列表看起来像一系列带有标题的彩色框（每个框都有一个类名“.item”）。当您从列表中拖动时，它会克隆它，以便列表保持不变（即不会删除块）。
有两个容器（在本示例中），类名称为“dragrow1”和“dragrow2”。根据您将框拖入的行，该块将改变外观。这按其应该的方式工作。麻烦在于让这些盒子再次拖动，无论是在它自己的容器还是另一个容器中，并且不克隆自身（它需要移动）。顺便说一句，由于样式原因，类名在删除后从“.item”更改为“.box”。好处是，当您将彩色框拖到容器中时，由于应用了 css 样式，每个框都彼此相邻浮动，因此它们从左上角并排放置。
到目前为止，我的 jquery 代码如下所示：
$(document).ready(function(){
$(".items").draggable({helper: 'clone'});
$(".dragrow1").droppable({
accept: ".items, .box",
hoverClass: 'dragrowhover',
tolerance: 'pointer',
drop: function(ev, ui) {
var dropElemId = ui.draggable.attr("id");
var dropElemTitle = ui.draggable.attr("title");
$(this).append('<div class="box" id="'+dropElemId+'row1">'+dropElemTitle+' - some extra box content here</div>');
$('div.box a').click(function(){$('#'+dropElemId+'row1').remove()});
}
});
$(".dragrow2").droppable({
accept: ".items, .box",
hoverClass: 'dragrowhover',
tolerance: 'pointer',
drop: function(ev, ui) {
var dropElemId = ui.draggable.attr("id");
var dropElemTitle = ui.draggable.attr("title");
$(this).append('<div class="box" id="'+dropElemId+'row2">'+dropElemTitle+' - different content here</div>');
$('div.box a').click(function(){$('#'+dropElemId+'row2').remove()});
}
});
});
容器代码的示例如下所示：
<div class="dragbox-content" style="display:block" >
<div class="dragrow1"> </div>
<div class="dragrow2"> </div>
</div>
谁能给我任何指示？
谢谢，
阿里。
I'm working on a drag & drop page where you can drag elements from a list into various droppable containers. This works perfectly. What I am now trying to achieve is then have the ability to drag these from one container to another (or re-order them inside a container). But I cannot seem to do this.
The list looks like a succession of coloured boxes with titles (each has a class name of '.item'). When you drag from the list it clones it, so that the list stays the same (ie. blocks are not removed).
There are two containers (in this example), with class names of 'dragrow1' and 'dragrow2'. Depending on which row you drag your box into, the block will change appearance. This works as it should. The trouble is getting these boxes to drag again, either inside its own container or another one, and without cloning itself (it needs to move). By the way, the class name changes from '.item' to '.box' after dropping for style reasons. What's nice is as you drag a coloured box into a container, because of the css style applied, each box floats next to each other, so they lay side by side from the top left corner.
My jquery code so far looks like this:
$(document).ready(function(){
$(".items").draggable({helper: 'clone'});
$(".dragrow1").droppable({
accept: ".items, .box",
hoverClass: 'dragrowhover',
tolerance: 'pointer',
drop: function(ev, ui) {
var dropElemId = ui.draggable.attr("id");
var dropElemTitle = ui.draggable.attr("title");
$(this).append('<div class="box" id="'+dropElemId+'row1">'+dropElemTitle+' - some extra box content here</div>');
$('div.box a').click(function(){$('#'+dropElemId+'row1').remove()});
}
});
$(".dragrow2").droppable({
accept: ".items, .box",
hoverClass: 'dragrowhover',
tolerance: 'pointer',
drop: function(ev, ui) {
var dropElemId = ui.draggable.attr("id");
var dropElemTitle = ui.draggable.attr("title");
$(this).append('<div class="box" id="'+dropElemId+'row2">'+dropElemTitle+' - different content here</div>');
$('div.box a').click(function(){$('#'+dropElemId+'row2').remove()});
}
});
});
And an example of the container code looks like this:
<div class="dragbox-content" style="display:block" >
<div class="dragrow1"> </div>
<div class="dragrow2"> </div>
</div>
Can anyone give me any pointers?
Thanks,
Ali.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我找到了另一种方法，通过使用可拖动和可排序。您可以在此处查看有关它的单独主题：
jQuery - 操作可排序列表中的删除元素
我还没弄清楚如何在容器之间拖动，因为它实际上不是一个要求。
阿里.
I found another way, by using draggable with sortable. You can see a separate topic here about it:
jQuery - manipulate dropped element in sortable list
I didn't figure out how to drag between containers yet because it is not actually a requirement.
Ali.