Jquery: Перетаскиваемые элементы связаны между SortableList и DroppableArea выпуска клона

Question

Я воздействую на панель из 2-х частей:

• список: содержащий все мои виджеты, и я хотел бы, чтобы каждый виджет, чтобы быть перетаскиваемый и сортируемый.

• Площадь: содержит изображение, в котором я хочу отключить свои виджеты (и сохранить их положение позже): Поэтому мне нужно, чтобы мои виджеты были недоступны и перетаскивались.

Я пытаюсь выполнить это поведение с пользовательским интерфейсом JQuery. Кроме того, я хотел бы перетащить мои виджеты из списка в область, и если захочу, перетащите их обратно в список.

---

EDIT:https://jsfiddle.net/Tenmak/jzmsatrg/ (новая ссылка)

var myImageSlot = $("#image_slot").droppable({ 
    accept: ".listItem", 
    drop: function(ev, ui) { 
     console.log('dropped'); 

     if (ui.draggable.hasClass("ontray")) { 
     var cloneTile = ui.draggable.clone() 
      .removeClass("ontray") 
      .removeClass("ui-sortable-handle") 
      .show(); 
     myImageSlot.children(".itemsContainer").append(cloneTile); 
     var dropx = ui.offset.left - myImageSlot.offset().left; 
     var dropy = ui.offset.top - myImageSlot.offset().top; 

     cloneTile.css({ 
      "left": dropx + "px", 
      "position": "absolute", 
      "top": dropy + "px" 
     }); 
     setTileDraggable(cloneTile); 
     ui.helper.remove(); 
     ui.draggable.remove(); 
     } 
    } 
    }).disableSelection(); 

Устанавливая абсолютную позицию в перетаскиваемом пункта, когда за пределами списка, разыскиваемый поведение есть и анимация гладкой, но иногда он дублируется, скорее всего, из-за неправильного использования метода clone().

Есть ли способ исправить эту ошибку? Должен ли я действовать по-другому? Любая помощь была бы действительно приятной, я чувствую, что добираюсь туда, но некоторые подсказки или anythins действительно будут helful. N.B: Я открываю щедрость, как только могу, потому что мне это действительно нужно.

Answer 1

Я надеюсь, что исправил проблему вы имели с дубликатами при выполнении клона после падения.

Причина, по которой я обнаружил, заключается в том, что она клонируется дважды, когда вы быстро перетаскиваете элементы между контейнерами, так как событие капли вызывалось дважды по какой-то причине, так как самые быстрые движения вызвали бы его.

Чтобы исправить это, я устанавливаю индекс для каждого перетаскиваемого элемента в нагрузке с помощью атрибута данных и проверяя его, когда добавление элемента в контейнер для любого из того же индекса уже существует, чтобы избежать дублирования.

Затем я проверил это и не смог повторить проблему.Поэтому я надеюсь, что он решил вопрос, но в любом случае мне нужно будет вам проверить и подтвердить :-)

Вот обновленная ссылка скрипку,

https://jsfiddle.net/balasuar/jzmsatrg/4/

Исправление я есть,

Способ по индексу настройки

var setupItemIndex = function(index) { 
    return function(container) { 
     container.find(".listItem").each(function(){ 
        $(this).attr('data-index', index++); 
     }); 
    }; 
    }(0); 

Затем инициирующего установку индекса для обоих контейнеров,

setupItemIndex($('#listContainer')); 
setupItemIndex($('#image_slot')); 

Затем извлекая индекс упал пункта

var targetContainer = myImageSlot.children(".itemsContainer"); 
    var itemIndex = ui.draggable.attr('data-index'); 

Затем, проверяя этот показатель существует ли уже в правом контейнере перед добавлением его там.

if(targetContainer.has('[data-index="' + itemIndex + '"]').length === 0) { 
     myImageSlot.children(".itemsContainer").append(cloneTile); 

     ----- 

} 

Дайте идти :-)

Answer 2

Мне пришлось начинать с нуля, в итоге получилось и сильно модифицированный код. Надеюсь, поможет.

работает скрипку

https://jsfiddle.net/ergec/thj7sz0w/

HTML

<div class="master" id="master_containment"> 
    <div class="container sortables" id="listContainer"> 
     <div class="listItem">Item 1</div> 
     <div class="listItem">Item 2</div> 
     <div class="listItem">Item 3</div> 
    </div> 
    <div class="container" id="image_slot"> 
     <div class="itemsContainer sortables"> 
      <div class="listItem">Item 4</div> 
      <div class="listItem">Item 5</div> 
     </div> 
    </div> 
</div> 

CSS

.sortable-placeholder { 
    height: 60px; 
    width: 60px; 
    background-color: yellow; 
    float: left; 
} 

.listItem { 
    background: #00e; 
    color: #fff; 
    height: 60px; 
    line-height: 60px; 
    text-align: center; 
    width: 60px; 
    float: left; 
    position: relative; 
    z-index: 999; 
} 

.container { 
    background: teal; 
    border 1px; 
    border-style: solid; 
    width: 250px; 
    height: 200px; 
    padding: 10px; 
} 

#image_slot { 
    background: brown; 
    position: absolute; 
    left: 300px; 
    top: 8px; 
} 

.master { 
    width: 560px; 
    height: 220px; 
} 

.itemsContainer { 
    height: 200px; 
} 

JS

$("#listContainer").sortable({ 
    placeholder: "sortable-placeholder", 
    containment: "#master_containment", 
    connectWith: ".itemsContainer", 
    revert: 100 
}).find(".listitem").draggable({ 
    connectToSortable: ".sortables", 
    containment: "#master_containment", 
    helper: "original", 
    revert: "invalid" 
}).disableSelection(); 
$(".itemsContainer").sortable({ 
    placeholder: "sortable-placeholder", 
    containment: "#master_containment", 
    connectWith: "#listContainer", 
    revert: 100 
}).find(".listItem").draggable({ 
    connectToSortable: ".sortables", 
    containment: "#master_containment", 
    helper: "original", 
    revert: "invalid" 
}).disableSelection();