2016-12-28 76 views
1

我在頁面中有可拖動的對象,並且它具有區域的捕捉設置。jQuery可拖動捕捉到中心,同時拖動

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

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

所以,現在如果$('#obj')被拖動的".drag-bound"邊境附近,它就會被折斷那裏。

問題是我想要$('#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); 
      } 

      }); 
相關問題