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;">

项目

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

2 个答案: