如何将 ondragstart 事件动态添加到动态创建的 div

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 可拖动小部件会让你的生活变得轻松

Answer 2

我做了这个：

function drag(ev) {  alert('Hi');  }

var grpcount = 21;
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>");
group.bind("dragstart", function(ev){drag(ev);});
$('#boundary').append(group);  

在此处查看工作小提琴：http://jsfiddle.net/nxcSz/