2つのjQueryドラッグ可能なリスト項目が正しく動作しない（jsFiddleの例で）

以下の最小限の作業例では、ボックス '1'をドラッグして '2'ボックスにドロップすると2つのボックスを交換します。問題は、ボックス '1'をドロップすると、そのスタイルの '上部'が&の '左'の値になって、ドロップする場所から離れた位置に配置されるということです。そのクラスには 'ui-draggable-dragging'が含まれています。上部の&の左の値は、要素がドロップ前にドラッグされた量に関連しているようです。ドラッグは「中断」され、それゆえ、残った「ユー・ドラッガブル・ドラッグ」クラスでしたか？2つのjQueryドラッグ可能なリスト項目が正しく動作しない（jsFiddleの例で）

スワップをシームレスに機能させるには、何が欠けていますか？ full jsfiddle example here

<html> 
<head> 

    <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script> 

    <script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"></script> 

    <script type="text/javascript"> 

     jQuery.fn.swapWith = function(to) { 
      return this.each(function() { 
       var copy_to = $(to).clone(true); 
       var copy_from = $(this).clone(true); 
       $(to).replaceWith(copy_from); 
       $(this).replaceWith(copy_to); 
      }); 
     }; 

     $(document).ready(function() { 

     options = {revert: true}; 

     $("li").draggable(options) 
     $('#wrapper').droppable({ 
      drop: function(event, ui) { 
      $(ui.draggable).swapWith($('#two')); 
      } 
     }); 
     }); 
    </script> 

</head> 
<body> 
    <form> 
    <ul id="wrapper"> 
     <li id='one'> 
      <div style="width: 100px; height: 100px; border: 1px solid green"> 
       one<br /></div> 
     </li> 
     <li id='two'> 
      <div style="width: 110px; height: 110px; border: 1px solid red"> 
       two<br /></div> 
     </li> 
    </ul> 
    <br /> 
    </form> 
</body> 
</html>

出典

2011-01-03 Tony_Henrich

これは私の回避策です。

jQueryの内部ドロップとドラッグの仕組みを見ずに理解していないと、ドラッグのすべてが処理を終了するまでにいくつかの経過時間があります。

私は、すべてが完了するまでスワップを開始すべきではないと考えました。私はこれがいつ起こるかわからないので、私はある遅れの後にスワップを起こした。私は、ドロップイベントでsetTimeoutを使用しました。「すべてが明確で安全である」ことを確認するために、少なくとも600msを使用しなければなりませんでした。 600ms未満では、 'トップ' & 'left'にはまだ処理が行われていないことを意味するいくつかの値がありました。遅延が長いほど、その値は小さくなります。大きいものにはゼロと等しいゼロが残ります。試行錯誤によって600msがそれをするようです。

誰かが「よりクリーン」なソリューションを持っていれば、私はそれを感謝します。プラス '科学的な'説明が役立ちます。あなたの他のポストからの継続で

出典

2011-01-03 22:30:21

、私はヘルパーを追加しました：「クローン」オプションをした後、実施例

<script type="text/javascript"> 

    jQuery.fn.swapWith = function(to) { 
     return this.each(function() { 
      var copy_to = $(to).clone(); 
      var copy_from = $(this).clone(); 
      $(to).replaceWith(copy_from); 
      $(this).replaceWith(copy_to); 
     }); 
    }; 



    $(document).ready(function() { 

     options = { 
       revert: true, 
       helper: 'clone' 
     }; 

     $("li").draggable(options); 
     $('#wrapper').droppable({ 
      drop: function(event, ui) { 
    //  window.setTimeout(function(){ 
       $('#one').swapWith($('#two')); 
       $(".ui-draggable-dragging").remove(); 
       $("li").draggable(options); 
    //}, 1); 
      } 
     }); 
    }); 

</script>

.ui-ドラッグ - ドラッグクラスで任意の要素を削除するためのスクリプトに次のように語った。http://jsfiddle.net/XkUDv/26/

希望に役立ちます！

PS：私はjsfiddleを使用していませんでした。その前にあなたに感謝してください:)

出典

2011-01-04 01:20:45 ehudokai

2つのjQueryドラッグ可能なリスト項目が正しく動作しない（jsFiddleの例で）

答えて

関連する問題