1

ドロップ可能なdivにドロップされたときに、ドラッグ可能なオブジェクトを元の位置に戻すドラッグアンドドロップの例があります。

私の問題は、ドラッグ可能なオブジェクトで元に戻すが有効になっている場合、オブジェクトをページ上の別の位置にドラッグできることです。ドラッグ可能なオブジェクトは、ドロップ可能な div にドロップしたときにのみ元に戻ります。

ページ上のどこにドラッグしても、ドラッグ可能なオブジェクトを元に戻したいですか?

私はこれを試しましたが、うまくいきません。

{
revert: 'vaild',
stop: function(){
    $(this).draggable('option','revert','invalid');
}

ここでの問題は、ドラッグ可能なオブジェクトを元に戻すが、ドロップ可能な div にドロップしても元に戻らないことです。

  <script>
        $(function() {
        $( "#draggable" ).draggable({ revert: "valid" });
        $( "#draggable1" ).draggable({ revert: "valid" });
        $( "#droppable" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
        var dragElemId = ui.draggable[0].id;
        var imgPath = $('#' + dragElemId).attr("des-image");
        $( this )
            .find( ".drop-image" ).removeAttr("src").attr("src",imgPath);
        }
        });
        });
        </script>
4

1 に答える 1

5

revertプロパティを に設定するtrueと、常に元に戻ります。

   $( "#draggable" ).draggable({ 
       revert: true
   });
   $( "#draggable1" ).draggable({ 
       revert: true
   });
   $( "#droppable" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
             //ommited for brevity
        }
    });

作業例: http://jsfiddle.net/yLuvv/

于 2013-03-19T09:49:47.730 に答える