jQuery 拖动时可拖动对齐中心

Question

我在页面中有可拖动的对象，它有区域捕捉设置。

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

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

所以现在如果 $('#obj') 被拖到 ".drag-bound" 的边界附近，它就会被捕捉到那里。

问题是我希望 $('#obj') 也对齐到 ".drag-bound" 的中心。

有什么好的方法可以实现吗？

我应该在 drag 事件处理程序中编写自定义代码吗？

里面有什么好的简单的选项吗？

Answer 1

好吧，从我的调查来看，似乎没有一个很好的选择来实现我的目的。

我在拖动事件处理程序中制作了自定义代码，如下所示：

       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);
            }

          });

jQuery 拖动时可拖动对齐中心

jQuery draggable Snap to Center while dragging

jquery-ui

draggable