鼠标双击事件自动拖放

Question

这是我的小提琴：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 () {

                    });
                }
            });
        }
    });
});

Answer 1

你可以试试这样的：(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});              
        });
    }
});