Question

示例：

<div>
    <div class='drop'>
        <div class='drag'></div>
    </div>
    <div class='drop'>
    </div>
    <div class='drop'>
    </div>
    <div class='drop'>
    </div>
    <div>
    </div>
</div>

$('div.drag').draggable({ containment: 'div.drop' });

通常，如果只有1个“div.drop”元素，则按预期工作。如果有多于1个（如上例所示），我认为它将被拖放到任何“div.drop”div中。事实证明，它只能被“div.drop”选择器匹配的第一个元素可拖动/可拖放。

是否有针对此的解决方法（即，仅在“div.drop”div中使其包含/ droppable / draggable）？

编辑：我猜你是对的。经过一些反省后，我意识到我没有采用你建议的解决方案，因为div之间有填充，我不希望在填充区域上删除“div.drag”div。

Answer 1

它不像那样！遏制是约束拖动的界限。

你想要拖放然后你必须为div.grag配置拖动：

$('div.drag').draggable();

并为div.drop配置drop：

$('div.drop').droppable();

您可以使用第一个div级别为drag元素添加包含：

<div id='dragZone'>
    <div class='drop'>
        <div class='drag'></div>
    </div>
    <div class='drop'>
    </div>
</div>


$('div.drag').draggable({ containment: '#dragZone'});

Answer 2

containment限制可拖动在给定元素范围内的移动。您可以将containment设置为div.drop的父级。

你应该使div.drop s droppable，附加可拖动的drop，并使用revert: 'invalid'选项，以便如果没有掉落在droppable上，则draggable会恢复

$('div.drop').droppable({drop: function(e, ui) {
    ui.draggable.appendTo(this);
}});
$('div.drag').draggable({
    helper: 'clone', 
    revert: 'invalid'
});

Answer 3

正如大家所指出的那样，收容selector不能像那样工作，因为它 Constrains拖到指定元素或区域的范围内。

您可以尝试以下内容：

JQuery参考：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

HTML：

<div id="dragContainer">    
<div class='drop'> 
    <div class='drag'>drag</div>     
</div>     
<div class='drop'>drop
</div>     
<div class='drop'>drop
</div>     
<div class='drop'>drop
</div>     
<div class='nodrop'>
</div>
</div>

JQuery的：

<script type="text/javascript"> 
$('div.drag').draggable({ containment: '#dragContainer', revert: "invalid" });

  $('div.drop').droppable( {
    drop: handleDropEvent
  } );

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  alert( 'Ok to drop here onto me!' );
}
</script>

Answer 4

尝试我的代码

<style>
.container {
  border: 2px solid #000;
}
.container img {
    width: 45px;
    height: 45px;
}
.draggable {
  width: 40px;
  height: 40px;
  background: #F90;
  border-radius: 10px;
  margin: 0 0 0 0;
  float: top;
}
.draggable.is-pointer-down {
  background: #09F;
  z-index: 2; /* above other draggies */
}
.draggable.is-dragging { opacity: 0.7; }
 </style>
  <script>
$(document).ready( function() {
  var $draggables = $('.draggable').draggabilly({
    // contain to parent element
        **containment: "#box"**
  });
});
</script>

您好。我想这可能对你有所帮助:)

<div class="container" id="box">

我的照片在这个div里面。

JQuery UI - 如何将包含应用于匹配多个div的选择器？

4 个答案: