社区首页 >问答首页 >JQuery UI -如何将包含应用于匹配多个div的选择器？

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

Stack Overflow用户

提问于 2012-01-25 10:14:08

回答 4查看 8.6K关注 0票数 5

示例：

<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“元素，它会按预期工作。如果有超过1个(如上例所示)，我认为它会被拖放到任何"div.drop“div中。结果是，它只能拖/放到"div.drop“选择器匹配的第一个元素。

有没有解决这个问题的办法(也就是，让它只在"div.drop“div中包含/可放/可拖)？

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

jquery

jquery-ui

javascript

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-01-25 10:28:25

它不是那样工作的！包含是对拖动的约束约束。

你想要拖放。

然后，您必须为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'});

票数 2

Stack Overflow用户

发布于 2012-01-25 10:36:02

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

您应该将div.drop设置为可拖放，在拖放时追加可拖放项，并使用revert: 'invalid'选项，以便在可拖放项未被拖放到可放放项的情况下还原可拖放项。

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

票数 1

Stack Overflow用户

发布于 2012-01-25 11:49:09

正如这些人所指出的那样，容器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>