Question

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

我有一个“组”按钮，当它被点击时，将动态创建一个“组”div（然后我在其中添加一些预先选择的'子'div）
但是我需要新的'group'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 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);

使用此

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/

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

2 个答案: