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

Question

jQuery UI 拖动插件 - 当我在包含（父级）上设置填充 40px div 然后从 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 class="parent" style="200px; height:100px; border:1px solid red;">

项

Answer 2

为避免这种情况，您可以简单地在主内添加另一个 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>

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

jQuery UI dragging - Cannot move on padding area

javascript

jquery

jquery-ui

jquery-ui-draggable