拖放克隆答案

【问题标题】：Drag & Drop Clone拖放克隆
【发布时间】：2011-10-18 15:09:33
【问题描述】：

我正在使用带有 Sortable 的 jquery Draggables。我在左侧有一个元素列表，我需要将其拖放到右侧的不同 div 中。可以将左侧的相同项目放入多个盒子中，因此我使用了助手：“克隆”。一切正常，直到我需要获取对在接收事件中克隆的新元素的引用，以便我可以向其添加点击处理程序。

我需要对新元素的引用！

<div>
        <div style="float: left; width: 300px;">
            <div id="FieldList">
                <h2>Loading</h2>            
            </div>
            <input type="button" name="cmdTest" id="cmdTest" value="Test" />
    </div>
    <div style="float: right; width: 300px;">
        <div>
            <div>Select Columns</div>
            <div class="Toolbar"></div>
            <div id="SelectFields" class="DroppableField">

            </div>
        </div>
        <div>
            <div>Conditions</div>
            <div class="Toolbar"></div>
            <div class="DroppableField" style="background-color: Gray; height: 200px;">

            </div>
        </div>
        <div>
            <div>Order</div>
            <div class="Toolbar"></div>
            <div class="DroppableField" style="background-color: Gray; height: 200px;">

            </div>
        </div>
    </div>
    <div style="clear: both;">
    </div>
</div>

Javascript：

$(document).ready(function () {

        $(".DroppableField").sortable({
            revert: true,
            receive: function (ui, event) { 
                // ui.helper always seems to be null. Many of the other properties seem to reference the original item.  I need the NEW ONE!!!                  
                $(ui.helper).dblclick(function () {

                });
            }
        });

        $.ajax({
            url: "/condition/getconditions",
            data: {},
            dateType: "json",
            type: "POST",
            success: function (data, successcode, jqXHR) {
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    $("#FieldList").append("<div>" + data[i].Description + "</div>").find("div:last").data("fielddata", data[i]);
                    //html += ;
                }

                $("#FieldList div").draggable({
                    connectToSortable: ".DroppableField",
                    helper: "clone",
                    revert: "invalid"
                });
            }
        });

    });

【问题讨论】：

似乎没有开箱即用的方法来获取对新克隆项目的引用，但是，stackoverflow.com/questions/4973339/… 提供了一个很好的解决方法。
另外，你的ui 和event 互换了，应该是receive: function (event, ui)

标签： jquery drag-and-drop draggable jquery-ui-sortable

【解决方案1】：

您似乎已经反转了回调函数接收的两个参数。

receive: function (ui, event) { 

}

应该是

receive: function (event, ui) { 

}

根据jQuery UI Docs：

所有回调都接收两个参数：原始浏览器事件和准备好的 ui 对象[...]

【讨论】：