14

ドロップ時の ajax 呼び出しが失敗を返した場合、ドラッグ可能なものを元の位置に戻したい。これが私が想像しているコードです.. ajax呼び出しの処理中にドラッグ可能なものがドロップ可能にある場合は問題ありません...

<script type="text/javascript">
jQuery(document).ready($){
    $("#dragMe").draggable();
    $("#dropHere").droppable({
        drop: function(){
            // make ajax call here. check if it returns success.
            // make draggable to return to its old position on failure.
        }
    });
}
</script>
<div id="dragMe">DragMe</div>
<div id="dropHere">DropHere</div>
4

5 に答える 5

18

リプレイ @Fran Verona をありがとう。

私はこのように解決しました：

<script type="text/javascript">
jQuery(document).ready($){
    $("#dragMe").draggable({
        start: function(){
        $(this).data("origPosition",$(this).position());
        }
    });
    $("#dropHere").droppable({
        drop: function(){
            //make ajax call or whatever validation here. check if it returns success.
            //returns result = true/false for success/failure;

            if(!result){ //failed
                ui.draggable.animate(ui.draggable.data().origPosition,"slow");
                return;
            }
            //handling for success..
        }
    });
}
</script>
<div id="dragMe">DragMe</div>
<div id="dropHere">DropHere</div>

新しいグローバル変数を避けたかったのですが、変数の数も予測できませんでした。これは、最初の呼び出しが進行している間、つまり最初の呼び出しが戻る前に多くのドラッグドロップが発生する可能性があるためです..! ところで、同じ答えを探している人にとっては、.data()はすべての要素で機能するわけではありませんが、 jQuery.data() についてはわかりません..誰かがこれに何か問題を見つけたら教えてください! :)

于 2011-03-16T06:08:50.887 に答える
4

今朝、同じドラッグ可能な質問をネットで探していました。

NikhilWanpal のソリューションは機能しますが、ドラッグ可能な要素がスクロール可能なコンテナーに含まれているために、元に戻す位置が正しくない場合があります。

非常に便利な文書化されていない関数を実装する方法を説明するこの記事を見つけました：jQuery UI Draggable Revert Callback。

このコールバックで回答を確認し (可能な場合)、"TRUE" を返してキャンセルするか、"FASLE" を返して新しい位置を確認します。

$(".peg").draggable(
{
  revert: function(socketObj)
  {
     //if false then no socket object drop occurred.
     if(socketObj === false)
     {
        //revert the peg by returning true
        return true;
     }
     else
     {
        //socket object was returned,
        //we can perform additional checks here if we like
        //alert(socketObj.attr('id')); would work fine

        //return false so that the peg does not revert
        return false;
     }
  },
  snap: '.socketInner',
  snapMode: 'inner',
  snapTolerance: 35,
  distance: 8,
  stack: { group: 'pegs', min:50 },
  stop: function()
  {
     draggedOutOfSocket = false;
     alert('stop');
  }
} );

良い１日を

于 2012-03-17T10:26:58.360 に答える
3

ドラッグ可能な要素の左または上の位置をいじっていない場合は、ajax 呼び出しでエラーが発生したら、これらの css プロパティをリセットするのと同じくらい簡単です。

drop_elems.droppable({
  drop: function(event, ui) {
    $.ajax(url, {
      error: function(x, t, e) {
        ui.draggable.css({top: 0, left: 0});
      },
    });
  }
});
于 2013-05-30T22:14:22.877 に答える
2

ドラッグを開始する前に元の位置を保存し、ドロップに失敗した場合は復元してみてください。次のように元の位置を保存できます。

var dragposition = '';

$('#divdrag').draggable({
   // options...
   start: function(event,ui){
      dragposition = ui.position;
   }
});

$("#dropHere").droppable({
   drop: function(){
       $.ajax({
           url: 'myurl.php',
           data: 'html',
           async: true,
           error: function(){
               $('#divdrag').css({
                  'left': dragposition.left,
                  'top': dragposition.top
               });
           }
       });
   }
});
于 2011-03-15T13:14:08.643 に答える