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

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' });

通常情况下，如果只有一个"div.drop"元素，则它将按预期工作。如果有多个（如上例），则认为可以在任何一个"div.drop"中拖放。但事实证明，它只能被拖动/放置到由"div.drop"选择器匹配的第一个元素中。

是否有一种解决方法（即仅使其包含/可放置/可拖动到"div.drop"中）？

编辑：我想你们是对的。经过一些反思，我意识到我没有使用您建议的解决方案，因为在"div"之间有填充，并且我不希望"div.drag"被放置在填充区域上。

- developarvin

Answer 1

不是那样工作的！

这里需要限制拖动的边界。

您想要拖放功能。

那么您需要为div.grag配置拖动。

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

并为 div.drop 配置 drop：

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

你可以通过在第一个div层级中添加包含来对拖动元素进行限制：

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


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

- Benoît

Answer 2

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

你应该将 div.drop 元素设为可放置元素，在释放时将可拖动元素添加到其中，并使用 revert: 'invalid' 选项，以便在未放置在可放置元素上时回滚可拖动元素。

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

- ori

Answer 3

正如其他人所指出的那样，包含selector的约束不起作用，因为它会对拖动进行限制，使其保持在指定元素或区域的边界内。

您可以尝试以下内容：

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> 

- Nicholas Murray

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 中。

- Kelly