2016-12-28 5 views
1

私はページにドラッグ可能なオブジェクトを持っており、その領域のスナップ設定があります。 $('#obj')".drag-bound"の国境近くにドラッグされた場合jQuery draggableドラッグ中に中央にスナップします

<div class="drag-bound"> 
    <div id="obj"></div> 
</div> 

$('#obj').draggable({ 
    snap: ".drag-bound", 
    snapTolerance: 5 
}) 

だから今、それはそこにスナップされます。

$('#obj')".drag-bound"の中心にスナップされてしまうのが問題です。

どうすればいいのでしょうか?

カスタムコードをdragイベントハンドラ内に作成する必要がありますか?

その中には良いと簡単なオプションがありますか?

答えて

0

申し訳ありませんが、これまでの調査では、目的を達成するための良い選択肢がないようです。

私は次のようなドラッグイベントハンドラの内部でカスタムコードを作っています

 fn.branding.$resizable.draggable({ 

      snap: ".resize-bound", 
      snapTolerance: 5, 

      drag: function(event, ui) { 

      var ui_w = ui.helper.width(); 
      var ui_h = ui.helper.height(); 
      var margin = $(this).draggable("option", "snapTolerance"); 

      ///////////////////////////////////////////////////////// 
      // do custom snapping here 
      // 
      if (!(Math.abs((ui.position.left + (ui_w)/2) - (fn.branding.modal_preview_width/2)) > 2 * margin)) { 
       ui.position.left = Math.round((fn.branding.modal_preview_width - ui_w)/2); 
      } 

      if (!(Math.abs((ui.position.top + (ui_h)/2) - (fn.branding.modal_preview_height/2)) > 2 * margin)) { 
       ui.position.top = Math.round((fn.branding.modal_preview_height - ui_h)/2); 
      } 

      }); 
関連する問題