jQuery:拖放:找到目标的类并禁用拖放

jQuery : drag and drop : find the class of the target and disable the drop

本文关键字：拖放 目标 jQuery      更新时间：2023-09-26

你好，我正在开发一个拖放应用程序。我有一个可以沿着文档拖动的DIV，文档中还有其他一些DIV，我可以把一个DIV拖到其他DIV，这会把页面弄得一团糟。我想把它放在另一个DIV中，而不是像他那样放在另个DIV中。我想将它放在空的地方，并禁用在另一个子DIV中的放置。例如，如果我试图放置的DIV的类是cart项，不让他放置

<div id="cart">
<h1 class="ui-widget-header">Demonstration Site</h1>
<div class="ui-widget-content">
<ol id="insert-zone" class="ui-droppable ui-sortable">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
</ol>
</div>
</div>

我试过这样做，但这个不起作用

}).sortable({
   // items: "div:not(.placeholder)",
   items:"div:not(.insert-zone-End-of-Page)",   //prevents objects from dragging
    sort: function() {
     $(this).removeClass("ui-state-default");
   if( $(this).class!="cart-item") var position = $(this).offset(); 
     console.log($(this).class!="cart-item");

这是完整的购物车项目div

<div class="item-container cart-item">
<div class="SetDefault">
<span></span>
</div>
<img border="0" title="Double click to Set Default Cat" src="http://www.myengravedjewelry.com/images/products/medium_101-01-071-08.jpg" alt="2027">
<div class="item-header">
<div class="item-body">
<ul class="item-ul">
<li>
<span>ShortId: 2027.</span>
</li>
<li>
<li>
<li>
<li>
</ul>
</div>
</div>
<div class="item-footer"></div>
</div>

这对你有用吗（fiddle）：

 $('.content').sortable({
    items: "div.item-container", //prevents objects from dragging
    sort: function () {
        $(this).removeClass("ui-state-default");
        if ($(this).class != "cart-item") var position = $(this).offset();
        console.log($(this).class != "cart-item");
    }
});
<div id="cart">
     <h1 class="ui-widget-header">Demonstration Site</h1>
    <div class="content ui-widget-content">
        <ol id="insert-zone" class="ui-droppable ui-sortable">
            <div class="item-container cart-item">Item 1
                <br/>
                <div>Dont move me here</div>
            </div>
            <div class="item-container cart-item">Item 2</div>
        </ol>
    </div>
</div>
<div class='danger'></div>
相关文章：