jQuery UI 可拖动：自定义对齐方法

Question

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

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

我预期是这样的：$draggable.position().left = 0; 可能会将其吸附到父容器的左边缘，但没有任何区别。

这里有一个fiddle来演示：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

举个例子。

您需要像这样指定一个网格：

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

https://jsfiddle.net/m3r2xra3/

Answer 2

我已经设法让它工作了。尽管我必须说我不完全了解发生了什么。这些是我所做的更改 (updated fiddle)：

//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 对象会有所不同？

jQuery UI 可拖动：自定义对齐方法

jQuery UI Draggable: Custom Snap-To Method

javascript

jquery

drag-and-drop

jquery-ui

drag