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

【问题标题】：jQuery UI dragging - Cannot move on padding areajQuery UI 拖动 - 无法在填充区域上移动
【发布时间】：2018-10-22 12:11:11
【问题描述】：

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

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-draggable

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

项目

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。