1

ばかげた質問で申し訳ありませんが、JavaScriptは初めてです。

ドラッグ可能な div があります。その div がドロップされたときに何らかの処理を実行したいと考えています。これまでのところ、単純なアラートを作成しましたが、機能していません。ドロップイベントでコードを書く方法を教えてください。

これが私のコードです

<div id = "par" class = "ui-draggable" style="position: relative; height: 200px; width: 200px;outline:2px solid green">
</div>

<script>
     $('#par').draggable();
     $('#par').droppable({
            drop: function( event, ui ) {
                  alert("blabla");                                       
            }
     });
</script>

ここにフィドルのドラッグ可能ドロップ可能へのリンクがあり ます

4

4 に答える 4

0

MrObrian が言うように、draggable.stop達成しようとしていることに使用する必要があります。

このフィドルは違いを示しています。 http://jsfiddle.net/MddyD/4/

$(function() {
 $('#par').draggable({
               stop: function() { 
                       alert("hi");
                     }
            });

 $("#dropIn").droppable({
               drop: function() { 
                       alert("drop");
                     }
               });
于 2012-07-20T16:35:57.440 に答える
0

ここでは、ドラッグ可能として設定したオブジェクトを操作する必要があります。関数を停止イベントにバインドできます。

<script>
    $(function() {
        $('#par').draggable({
            stop: function(event, ui) {
                alert("Dropped");
            }
        });
    });
</script>

$(function(){ }); ドキュメントの読み込みが完了したときにスクリプトを実行するように指示するだけです。作成した他の関数を停止イベントにバインドすることもできます。

http://jqueryui.com/demos/draggable/#event-stop

于 2012-07-20T16:41:16.680 に答える
0

Droppable.drop を使用して、ドロップ可能にドロップされたものをキャッチします (ドラッグ可能とドロップ可能の両方を使用する必要があります)。

http://docs.jquery.com/UI/Droppable#event-drop

<script>
     $('#thingToDrag").draggable();
     $('#par').droppable({
            accept: "#thingToDrag",
            drop: function( event, ui ) {
                  alert("draggable dropped");                                       
            }
     });
</script>
于 2012-07-20T16:37:19.910 に答える
0

dragstopドラッグ可能な要素のドラッグが停止したときに起動されるイベントを使用する必要があります。

$('#par')
.draggable()
.on('dragstop', function(event, ui) {
    alert('ok')
});

http://jsfiddle.net/MddyD/3/

于 2012-07-20T16:39:31.103 に答える