Question

我在运行时创建了一些元素（js）并使它们可以拖动：

function fillAttachmentsPerPage(pageNum) {
    createAjaxRequest("Manager/GetAttachments", {
        'locationId': current_folder.attr('id'),
    }).done(function (res) {

        for (var i = 0; i < res.Attachments.length; i++) {

            attachmentDiv = '<div class=\"attachmentDiv ui-draggable\" id="'+ res.Attachments[i].AttachmentId +'" onmouseover=\"attachmentDiv_hover(this);\"'+
            'onmouseout=\"attachmentDiv_onmouseout(this);\">' +
'</div>';

        }



         $( ".attachmentDiv" ).draggable({
        //    start: function(event, ui) { ... }
            revert: 'invalid',
            drag: function(event, ui) { console.log("dragging") }
        });


        $('a:has(ins)').droppable({
           drop: function(event, ui) {
           console.log($(this).parent())
           setCurrentAttachment(ui.draggable.attr("id"));
           UpdateAttachmentLocation(ui.draggable.attr("id"), $(this).parent().attr("id"))

          }
        });

    });
}


 $( ".attachmentDiv" ).draggable({
//    start: function(event, ui) { ... }
    revert: 'invalid',
    drag: function(event, ui) { console.log("dragging") }
});

效果很好。

将此元素放入可拖动元素

之后

我再次创建相同的元素，但没有丢弃。

再次执行上述注册码，但元素不可拖动。

知道为什么吗？

Answer 1

因为在页面加载后添加了元素，所以可能需要使用jQuery .on方法。但是，我认为.draggable方法不适用于.on。

解决这个问题的一种方法是使用以下代码扩展jQuery：

(function($) {
    $.fn.liveDraggable = function(opts) {
        this.on("mousemove", function() {
            $(this).draggable(opts);
        });
    };
}(jQuery));

您需要在加载jQuery之后添加它，但在尝试在代码中使用它之前。然后而不是使用：

$(".attachmentDiv").draggable

您使用：

$(".attachmentDiv").liveDraggable

重新注册jquery.Ui draggable

1 个答案: