jQuery UI拖动-无法在填充区域上移动

Question

jQuery UI拖动插件-当我在容器（父级）div上设置填充40px ，然后从40px开始拖动项目，我需要从0px拖动项目拖动

<div class="parent" style="200px; height:100px; border:1px solid red; padding:30px;">
  <div  class="item" style="width:20px; height:20px">item</div>
 </div>


$( ".item" ).draggable({containment: "parent" });

的jsfiddle

Answer 1

为了避免这种情况，您可以简单地在主分区中添加另一个div，然后将填充添加到该新的div ，从div.parent删除填充。

然后，在设置可拖动对象时，只需将包含项设置为div.parent而不是仅parent 。

 $( ".item" ).draggable({containment: ".parent" }); 

 .item{ cursor: move; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <div class="parent" style="200px; height:100px; border:1px solid red;"> <div class="paddingDiv" style="padding: 30px;"> <div class="item" style="width:20px; height:20px">item</div> </div> </div> 

Answer 2

<div class="parent" style="200px; height:100px; border:1px solid red;">

项目