jQuery UI，拖放，追加到光标位置

I'm trying jQuery UI. I have 2 divs: one is my draggable item, and the other is my droppable zone. I'm cloning the draggable item and I append it to my droppable div. My problem is that I need to add the item in the same position where I drop it (where my cursor is), and right now the items are being added to the bottom of my droppable div. Any ideas? (sorry for my broken english).

我正在尝试jQuery UI。我有2个div：一个是我的可拖动项目，另一个是我的可放置区域。我正在克隆可拖动的项目，我将它附加到我的droppable div。我的问题是我需要将项目添加到我放置它的位置（我的光标所在的位置），现在这些项目被添加到我的droppable div的底部。有任何想法吗？（抱歉我的英语不好）。

My JavaScript:

我的JavaScript：

$(document).ready(function () {
    $(".block").draggable({ helper: 'clone' }, { grid: [20, 20] }, { revert: "valid" });

    $("#dropZone").droppable({
        accept: ".block",
        drop: function (ev, ui) {
            var droppedTable = $(ui.draggable).clone();
            droppedTable.appendTo($(this));
        }
    });
});

1 个解决方案

#1

Almost there. You need to fix the syntax for your draggable object:

差不多了。您需要修复可拖动对象的语法：

$( ".block" ).draggable({
    helper:'clone',
    grid: [20, 20], 
    revert: "invalid" //assume you want invalid here, not valid
});

and use ui.helper to clone the draggable object:

并使用ui.helper克隆可拖动对象：

$('#dropZone').droppable({
    accept: '.block',
    drop: function(event,ui){
        var droppedTable = $(ui.helper).clone();
        droppedTable.appendTo($(this));
    }
});

jsfiddle

的jsfiddle

#1