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

Question

您好，我正在开发拖放应用程序。我有一个可以沿着文档拖动的 DIV，并且文档中还有其他一些 div，我可以将一个 div 拖到其他 div，这会使页面变得困惑它在空的地方并禁用另一个 div 中的放置，例如，如果我尝试放置的 div 的类是购物车项目，则不要让他放置

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

Answer 1

这对你有用吗(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>