javascript - 如何为动态创建的 div 动态添加 ondragstart 事件

Question

有几个问题似乎在问这个问题，但没有人接受答案，也没有对我有用。

我有一个“组”按钮，当它被点击时，将动态创建一个“组”div(然后我在其中附加一些预先选择的“子”div)
但是我需要新的“组”div 可以拖动。
我可以动态设置 draggable 属性，没问题。但是，如果没有 ondragstart() 事件，可拖动就不是什么好事了，无论我尝试了什么，我都无法分配它。
我正在使用可能有影响的 jQuery。

我的代码的最新迭代是(这出现在从 body.onload 调用的 init() 函数中):

var group=$(document.createElement('div'));
group.attr({id: 'group'+grpcount});
group.attr({draggable: "true"});
group.addClass('group');
group.html("<span class='group'>Group"+grpcount+"</span>");
$('#boundary').append(group);   
document.getElementById('group'+grpcount).addEventListener("startdrag",drag);

但我也尝试了 jQuery .bind 的各种组合:

group.bind("dragstart", drag(ev));
group.bind("dragstart", function(ev){drag(ev);});

一切都无济于事。

我已经定义了一个拖动函数(我试过将它放在上面的代码之前和之后):

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id+":"+ev.pageX+":"+ev.pageY);
}

我希望有一些非常明显但我看不到的东西。
有人可以解决这个问题吗？

Answer 1

你最好看看Jquery UI draggable here

如果您还不知道，您可以在链中调用多个 jquery 函数，这样您的代码看起来更具可读性，如下所示:

var group=$('div').attr('id', 'group'+grpcount)
                  .addClass('group')
                  .html("<span class='group'>Group"+grpcount+"</span>");

$('#boundary').append(group);   

而不是

document.getElementById('group'+grpcount).addEventListener("startdrag",drag);

用这个

group.draggable({
    start:function(event, ui){
         //this is where dragging starts when you push mousedown and move mouse
    },
    drag:function(event, ui){
         //this function will be called after drag started each time you move your mouse
    }
    stop:function(event, ui){
         //this is where you release mouse button
    }
})

这个带有 droppable 的 jquery 可拖动小部件如果您真的想实现复杂的拖放功能，小部件将使您的生活变得轻松