javascript - 防止可拖动的项目移出容器？

Question

我试图阻止可拖动的 div 超出容器 div 的范围。

这是FIDDLE进一步解释这个问题。

我在代码中尝试了类似的操作，但这会阻止我的代码工作:

  if($('#set').offset().left > 50) 
  { 
     $( '#set div' ).draggable( 'option',  'revert', true ).trigger( 'mouseup' );
  }

有人可以就这个问题提出建议吗？

Answer 1

使用选项

containment: "parent" // Or any selector; "parent" refers to the immediate parent

http://api.jqueryui.com/draggable/#option-containment

喜欢:

$( '#set div' ).draggable({
   revert : true,
   containment: "parent"
}).trigger( 'mouseup' );

example