Javascript jQuery UI可拖动：自定义捕捉到方法

我知道jQueryUIAPI内置了

snap

、

snapMethod

和

snapTolerance

，但在这种情况下这些都不起作用

我面临的问题是：在容器内拖动时，我希望在一定距离内拖动的对象捕捉到容器的边缘。计算距离并触发此操作不是问题。这是一个我无法工作的地方

我期望的是：

$draggable.position（）.left=0

可能会将其捕捉到父容器的左边缘，但没有任何区别

这里有一把小提琴来演示：

JS:

//设置可拖动
$（'.drag'）.draggable({
drag:function（）{drag（$（this））}，
包含：'父'，
});
//拖
函数拖动（$draggable）{
var snap_公差=10；
//拖拉的
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=$（'.wrapper'）；
var w_top=0；
var w_bottom=$wrapper.height（）；
var w_left=0
var w_right=$wrapper.width（）；
//向左转
如果（d_左=（w_右捕捉_公差））{
log（'snap right'）；
$draggable.position（）.left=（w_right-$draggable.width（））；
_snap内=真；
}
//猛击顶部
如果（d_顶部=（w_底部捕捉_公差））{
console.log（'snap-bottom'）；
$draggable.position（）.top=（w_bottom-$draggable.height（））；
_snap内=真；
}     
}//端部fn阻力

下面是一个例子

您需要指定一个网格，如下所示：

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

$（函数（）{
$（“#draggable4”）.draggable（{grid:[20,20]}）；
$（“#draggable5”）.draggable（{grid:[80,80]}）；
});

---

我已经设法让它工作了。虽然我必须说，我并不完全理解正在发生的事情。以下是我所做的更改（）：

因此，在拖动事件中，我将ui对象以及jQuery对象（我想，如果我对ui对象的理解有误，请纠正我）传递到

拖动

函数中

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

//向左捕捉
如果（d_）离开了，谢谢，但是网格解决方案在我正在开发的应用程序中不起作用。
//set draggable
$('.drag').draggable({
  drag: function(e, ui){ drag($(this), ui) },
  containment: 'parent',
});

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