Question

你好我正在开发一个拖放应用程序。我有一个可以在文档中拖动的DIV，并且文档中还有一些其他div，我可以将一个div拖到其他div，这会使页面变得混乱我想放弃它而不是像他这样的另一个div我要放弃它在空的地方，并禁用另一个div的下降，例如，如果我试图丢弃的div的类是cart-item不让他做下降

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

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

1 个答案: