jQuery UI可拖动:自定义捕捉方法

Question

我知道jQuery UI API内置了snap、snapMethod和snapTolerance，但在这种情况下这些都不起作用。

这是我面临的问题：在容器内拖动时，我希望可拖动对象在一定距离内捕捉到容器的边缘。计算距离并触发这不是问题。它正在让我无法工作的拖拉者崩溃。

我预计会出现这样的情况：$draggable.position().left = 0;可能会将其捕捉到父容器的左边缘，但没有任何区别。

下面是一把小提琴：https://jsfiddle.net/jwxrevL2/1/

JS:

//set draggable
$('.drag').draggable({
  drag: function(){ drag($(this)) },
  containment: 'parent',
});
//drag
function drag( $draggable ){
  var snap_tolerance = 10;
  //Draggable 
  var d_top     = $draggable.position().top;
  var d_middle  = ($draggable.position().top+($draggable.height()/2));
  var d_bottom  = ($draggable.position().top+$draggable.height());
  var d_left   = $draggable.position().left;
  var d_center = ($draggable.position().left+($draggable.width()/2));
  var d_right  = ($draggable.position().left+$draggable.width());
  //Wrapper 
  var $wrapper = $('.wrapper');
  var w_top     = 0;  
  var w_bottom  = $wrapper.height();
  var w_left   = 0 
  var w_right  = $wrapper.width();   
  //snap to left
  if( d_left <= (w_left+snap_tolerance )){
    console.log('snap left');
    $draggable.position().left = w_left; 
    within_snap = true;
  }
  //snap to right
  if( d_right >= (w_right-snap_tolerance)){
    console.log('snap right');
    $draggable.position().left = (w_right-$draggable.width());
    within_snap = true;
  }
  //snap to top
  if( d_top <= (w_top+snap_tolerance )){
    console.log('snap top');
    $draggable.position().top = w_top;
    within_snap = true;
  }
  //snap to bottom
  if( d_bottom >= (w_bottom-snap_tolerance )){
    console.log('snap bottom');
    $draggable.position().top = (w_bottom-$draggable.height());
    within_snap = true;
  }     
}//end fn drag

Answer 1

我已经设法让它工作起来了。虽然我必须说我不完全理解发生了什么。以下是我所做的改变（更新的小提琴）：

//set draggable
$('.drag').draggable({
  drag: function(e, ui){ drag($(this), ui) },
  containment: 'parent',
});

因此，在拖动事件中，我将ui对象和jQuery对象（我想，如果我对ui对象有错误，请纠正我）传递到drag函数中。

//snap to left
if( d_left <= (w_left+snap_tolerance )){
  console.log('snap left');
  ui.position.left = w_left; 
  within_snap = true;
}

然后，通过更新ui对象position.left属性，我可以将其捕捉到位。

有人能解释为什么使用ui而不是jQuery对象会有所不同吗？

Answer 2

这里有一个例子。

您需要指定这样的网格：

<script>
$(function() {
    $( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
    $( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
});
</script>

https://jsfiddle.net/m3r2xra3/