如何將 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
    }
})

如果您真的想實現復雜的拖放功能，這個帶有可拖放小部件的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/