2

この質問をするように見える質問がいくつかありますが、誰も答えを受け入れず、何もうまくいきませんでした.

クリックすると「グループ」div が動的に作成される「グループ」ボタンがあります (事前に選択した「子」div をその中に追加します)
。ただし、新しい「グループ」div をドラッグ可能にする必要があります。
ドラッグ可能な属性を動的に設定できますが、問題ありません。しかし、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をご覧になることをお勧めします

まだわからない場合は、チェーン内の複数の 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 に答える