这是我的 fiddle :FIDDLE
期望:当我双击任何空TD时,自己的TR的可拖动元素可以自动拖放到该>TD。
我用谷歌搜索了很多,但找不到完美的解决方案。
我的JS代码
$(function () {
$(".dragDiv").draggable({
revert: 'invalid'
});
$(".mainTable tr td").droppable({
accept: function (item) {
return $(this).closest("tr").is(item.closest("tr")) && $(this).find("*").length == 0;
},
drop: function (event, ui) {
console.log($(this).attr('id'));
console.log(ui.draggable.attr('id'));
var $this = $(this);
$this.append(ui.draggable.css({
top: 0,
left: 0
}));
ui.draggable.position({
my: "center",
at: "center",
of: $this,
using: function (pos) {
$(this).animate(pos, "slow", "linear", function () {
});
}
});
}
});
});
最佳答案
您可以尝试这样的操作:(Check this fiddle)
$('.mainTable tr td').on('dblclick',function(e) {
if (!$(this).is(':has(.dragDiv)')) {
var destTD = $(this);
var srcTD = $(this).parent().find('td:has(.dragDiv)');
var drgElement = srcTD.find('.dragDiv');
drgElement.animate({ left: "+=" + (destTD.position().left - srcTD.position().left) }, "slow", "linear",function() {
drgElement.appendTo(destTD);
drgElement.css({left: 0});
});
}
});
关于jquery - 鼠标双击事件自动拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27646011/