2016-12-28 46 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); 
      } 

      }); 
相关问题