0

ページに 2 つの div があります。1 つはドラッグ可能で、もう 1 つは通常です。

ドラッグ可能な div:

<div id='draggable'>
     AAAAAA
</div>

通常のdiv:

<div id='dropbox'>
     BBBBBB
</div>

「ドラッグ可能な」div が「ドロップボックス」の div にドロップされたときに、「ドラッグ可能な」div の内容を「ドロップボックス」の div に追加したい。

したがって、 drop の後、「dropbox」div の内容は次のようになります。

AAAAAA
BBBBBB

jQueryを使用してこれを行う方法を教えてください。

4

4 に答える 4

1
$("#dropbox").droppable({
    drop: function(event, ui) {
        $(this).append(ui.draggable.html());
    }
})​
于 2012-05-07T10:21:23.647 に答える
1

UI ドロップ可能で試す

$(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                $( this ).append( ui.draggable.html();
            }
        });
    });

http://jqueryui.com/demos/droppable/

于 2012-05-07T10:22:15.267 に答える
1
$(function() {
        $( "#draggable" ).draggable();//your drag handler
        $( "#dropbox" ).droppable({ //your drop handler
            drop: function( event, ui ) {
                $( this ).append( ui.draggable.html() );
            }
        });
    });

JSFiddleのデモを参照してください

于 2012-05-07T10:22:55.910 に答える
0

drop次のイベントを使用できますdroppable

$("#dropbox").droppable({
    drop: function(event, ui) {
        $("<div></div>").text(ui.draggable.text()).appendTo(this);
    }
})​

デモ: http://jsfiddle.net/UrMrt/

于 2012-05-07T10:18:20.857 に答える