jQuery UI draggable locking divs

Question

私は何らかの種類の：http://jsfiddle.net/py3DE/203/を書きましたが、要素が適切なコンテナにドラッグされると、他のdivをその領域にドラッグすることでオーバーライドできます。どのように私はドラッグされた要素をブロックすることができますか、誰かが任意の要素をオーバーライドしようとする場合は、私に連絡してください、divは、元に戻ってdivを持つエリアに戻りますか？

if (!ui.draggable.closest('.empty').length) item = item.draggable()' 

Answer 1

これを行う簡単な方法があります。基本的には、クラスemptyを削除し、disableメソッドを使用します。

実施例：http://jsfiddle.net/Twisty/5rdxmp4p/

マイナーCSSの変更

.filled .item .closer { 
    display: block; 
} 

クラスを入れ替えるドロップ機能

drop: function(ev, ui) { 
    if ($(this).hasClass("empty")) { 
     $(this).removeClass("empty").addClass("filled"); 
     $(this).droppable("disable"); 
    } else { 
     return false; 
    } 
    var item = ui.draggable; 
    if (!ui.draggable.closest('.empty').length) item = item.draggable(); // if item was dragged from the source list - clone it 
    this.innerHTML = ''; // clean the placeholder 
    item.css({ 
     top: 0, 
     left: 0 
    }).appendTo(this); // append item to placeholder 
    } 

はXボタンが表示されますすることができます。次に、disableメソッドを実行して、この特定のアイテムがドラッグされたアイテムを受け入れないようにします。ユーザーが項目をこの地点にドラッグすると、項目が元に戻ります。ソート可能なを使用して

更新

：http://jsfiddle.net/Twisty/5rdxmp4p/2/

HTML

<div id="dragItems" class="source"> 
    <div class="item">Item 1</div> 
    <div class="item">Item 2</div> 
    <div class="item">Item 3</div> 
    <div class="item">Item 4</div> 
    <div class="item">Item 5</div> 
</div> 
<div id="sortItems" class="target"> 
</div> 

CSS

body { 
    background: #fff; 
} 

.source, 
.target { 
    margin: 20px; 
    min-height: 190px; 
    width: 400px; 
    border: 1px solid green; 
} 

.target { 
    border: 1px solid blue; 
} 

.item { 
    height: 20px; 
    margin: 5px; 
    padding: 5px; 
    border: 1px solid gray; 
    background-color: #cd8; 
    position: relative; 
} 

.closer { 
    float: right; 
    width: 20px; 
    height: 20px; 
    border: 0; 
    background-color: transparent; 
} 

.closer:hover { 
    background-color: transparent; 
    border: 0; 
} 

.empty { 
    height: 30px; 
    margin: 5px; 
    background: #eee; 
    border: 1px dashed #999; 
} 

.highlight { 
    border: 1px solid red; 
    background: #fff; 
} 

.highlight .item { 
    opacity: 0.3; 
} 

.ui-draggable-dragging { 
    z-index: 99; 
    opacity: 1 !important; 
    width: 378px; 
} 

jQueryの

$(function() { 
    $("#sortItems").sortable({ 
    axis: "y", 
    items: "> div", 
    placeholder: "empty", 
    dropOnEmpty: true, 
    stop: function(e, ui) { 
     var $it = ui.item; 
     if ($it.find(".closer").length == 0) { 
     var closeBtn = $("<span>", { 
      class: "closer" 
     }); 
     $it.append(closeBtn); 
     closeBtn.button({ 
      icon: "ui-icon-close", 
      label: "Close", 
      showLabel: false 
     }).click(function(ev) { 
      console.log("[INFO]: Closing ", $it); 
      $it.fadeTo(200, 0.0, function() { 
      $it.remove(); 
      $("#sortItems").sortable("refresh"); 
      }); 
     }); 
     } 
    } 
    }); 

    $("#dragItems .item").draggable({ 
    connectToSortable: "#sortItems", 
    revert: "invalid" 
    }); 

    $("#sortItems").disableSelection(); 
});