Jquery拖放问题
Jquery拖放问题
提问于 2013-08-02 01:06:06
我正在尝试使用Jquery UI执行拖放操作
我需要两张桌子之间的拖放功能。
table1
<table class='table'>
....
</table>
table2
<table class='table'>
....
</table>我希望用户将cell从表1拖到表2。
下面的代码实现了这一点。
var dragging =null;
obj = $('.table td');
$(obj).draggable({
cursor:'pointer',
snap:$('td span'),
revert: 'invalid'
})
$(obj).droppable({
//only accept the drop if the cell is empty.
accept: function(e){
return $(this).text().trim()=="";
},
//replace anything items on table 2.
drop:function(event, ui){
$(this).html(' ').droppable( 'disable' );
}
})我的问题是:在我将itemA从表1拖到表2之后，我似乎不能再将itemA拖到表2上了。我希望用户仍然能够拖动itemA，即使它在表2中。
我不知道这里出了什么问题。有人能帮我吗？非常感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-08-02 02:49:25
主要问题是使td可拖放。当您拖动一个td并将其拖放到另一个td上时，物理会将td从表中移出，因此" drop“点会发生变化。
此外，我建议不要以这种方式使用accept。在您的$(this)函数中调用accept时，它将返回所有可拖放对象。因为您实际上只关心td的内容，所以我建议以一种不同的方式处理这个问题，使用drop事件来验证td是否为空。
$(function() {
var dragging =null;
obj = $('.table td');
//use obj since $(obj) is already jQuery object
obj.draggable({
cursor:'pointer',
snap:$('td span'),
revert: 'invalid',
helper: 'clone',
start: function( event, ui ) {
//make helper same height as td
$(ui.helper).css('height', $(this).height());
}
})
obj.droppable({
accept: obj, //make obj accept
drop:function(event, ui){
var target = $(event.target), //can also use $(this)
drag = $(ui.draggable),
targetText = "",
dragText = "",
duration = 0;
if(target.text().trim() === ""){
//store original target, drag text
targetText = target.text().trim();
dragText = drag.text().trim();
//change html for each element
target.html(dragText);
drag.html(targetText);
}
else{
//if not empty, change duration
duration = 500;
}
//always have td revert
//however, if invalid, the revertDuration will be default
//so the element "reverts"
ui.draggable.draggable('option', 'revertDuration', duration);
ui.draggable.draggable('option','revert', true);
}
})
});演示：http://jsfiddle.net/dirtyd77/7Xd6n/4/
通过这样做，只有内容会发生变化，而td仍然保留在table中。
如果你有什么问题请告诉我！
Stack Overflow用户
发布于 2013-08-02 02:34:02
拖放的问题是拖放的元素实际上不会在DOM中移动。所以当你试图把它拖回原来的位置时，你就会试图把它拖到自己身上。
理想情况下，您应该将<td>元素中的内容包装在<div>元素中，而不是拖动这些元素。
调整后的代码如下所示：
$(function() {
draggable_obj = $('.table td div');
droppable_obj = $('.table td');
$(draggable_obj).draggable({
cursor:'pointer',
snap:'td',
revert: 'invalid'
})
$(droppable_obj).droppable({
drop:function(event, ui){}
})
});这里有一只小提琴在起作用：
http://jsfiddle.net/jjyNS/
如果您也需要元素在DOM中移动，那么您可能希望在元素被拖动时克隆它，隐藏原始元素，然后当您删除它时，追加已克隆的元素并删除原始元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18007142
复制相关文章
相似问题
腾讯云开发者
