jQuery UI draggable lock 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/

Minor 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, чтобы убедиться, что этот конкретный элемент больше не принимает перетаскиваемый элемент. Если пользователь перетаскивает элемент в это место, он затем возвращается.

Update

Использование Сортируемый: 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(); 
});