如何動態地將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

我做了這個：

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/

Answer 2

你會更好地看一看jQuery UI的可拖動here

，如果你不還不知道，你可以打電話多的jQuery finctions在環環相扣，讓你的代碼看起來更具可讀性象下面這樣：

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); 

使用本

和210

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 
    } 
}) 

這個jQuery與droppable控件拖動的小部件會緩解你的生活，如果你真的想實現複雜的拖放和拖放功能