2

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

我有一个“组”按钮,当它被单击时,将动态创建一个“组”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);
}

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

4

2 回答 2

2

你最好看看 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 可拖动小部件将让您的生活变得轻松

于 2013-08-06T21:38:24.870 回答
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/

于 2013-08-06T21:41:23.070 回答