Удаление элемента в область Draggable вызывает перетаскивание элемента для удаления или перемещения

Question

Когда я перетаскиваю элемент и вытаскиваю его на область сбрасываемо, элемент будет перестраиваться таким образом, чтобы его нижний левый угол находился под курсором мыши. Обратите внимание, что я перетаскиваю свой элемент из дочернего элемента одного сестра в правнук другого элемента сестры, в конечном счете между двумя ОЧЕНЬ разными вложенными представлениями в Backbone.

Это правильно, прежде чем я уронить мою деталь: ............. Это то, что происходит, когда я бросаю мою деталь:

...

Это код для моего перетаскиваемого пункта, в позвоночнике Просмотр визуализируют функцию:

// JQ Draggable 
    $('.stamp').draggable({ 
     revert: 'invalid', 
     helper: 'clone', 
     drag: function(event, ui) { 
     //Not using the drag function, should I? 
     } 
    }); 

Это код для моего сбрасываемого пункта:

 // JQUI Droppable 
     $(this.el).droppable({ 
     accept: '.stamp', 
     drop: function(event, ui) { 
      var newDiv = $(ui.helper).clone(false) 
      .removeClass('ui-draggable-dragging') 
      .css({position:'absolute', left:event.offsetX, top:event.offsetY}); 
      $(this).append(newDiv); 
     } 
     }) 

Моя цель состоит в том, что когда элемент упал, я не хочу, чтобы предмет перемещался. This jsFiddle делает именно то, что я хочу, чтобы мой код делал, о чем свидетельствует пример API.

Однако, когда я применил код выше (jsFiddle) к моему проекту, объект перетаскивания исчезает при удалении.

Это правильно, прежде чем я уронить мою деталь: ............. Это то, что происходит, когда я бросаю мою деталь:

..

Я только изменил код для моего сбрасываемого пункта:

// JQ Droppable 
     $(this.el).droppable({ 
     accept: '.stamp', 
     drop: function(event, ui) { 
      var newDiv = $(ui.helper).clone(false) 
      .removeClass('ui-draggable-dragging') 
      .css({position:'absolute', left: ui.offsetX, top: ui.offsetY}); 
      $(this).append(newDiv); 
     } 
     }) 

в конечном счете, только изменяя CSS от event.offset* к ui.offset*. Также обратите внимание, что в области divppable div есть SVG, который занимает большую часть div вместе с двумя другими div.

Отслеживание «отсутствующего элемента с использованием JQuery после освобождения с помощью stop: на перетаскиваемом объекте, похоже, идет в крайнее левое положение.

Так возвращаясь к сбрасываемой коде, если мы избавимся от всего и просто включить droppable({...}) функции с двумя атрибутами, один за что accept, и один для функции drop, но в функции drop, мы append в ничего, экземпляр или нет, мы получаем ожидаемые результаты (хотя и с ошибкой консоли):

$('#droppable-area').droppable({ 
    accept: '.stamp', 
    drop: function (event, ui) { 
     $('#droppable-area').append(n); 
    } 
}) 

, но если мы не будем включать append или если мы передаем без каких-либо параметров в append, это исчезает " , как видно из этого fiddle.

Что происходит?

---

ТАКЖЕ, при исследовании перетаскиваемую элемента, когда вы берете его в левом верхнем углу, то console.log(event.offsetX, event.offsetY); напечатает что-то ~ 5 5. Если вы возьмете его в левом нижнем углу, это будет размер кнопки div, поэтому в нашем случае ~ 12 25.Когда вы перетаскиваете элемент INTO в раскрывающийся div, но НЕ отпускаете, то изменяются eventX и eventY, чтобы быть позицией курсора в div. Может быть, я могу взять начальное значение eventX и eventY, как только они начнут перетаскивать и использовать это для настройки точного position:absolute?

Answer 1

У меня была схожая проблема! Я узнал, что helper: 'clone' как-то не работает должным образом. удалите это и скажите, если это поможет.

Answer 2

Вопрос here заключается в том, что элемент helper создан только для обеспечения визуальной обратной связи, и он будет удален после перетаскивания stopped.

Просто возьмите копию, используя метод clone() когда dropped и append() его Droppable, прежде чем он удаляется из DOM, и вы будете в порядке.

$('.stamp').draggable({ 
 
    revert: 'invalid', 
 
    helper: 'clone', 
 
    drag: function (event, ui) {} 
 
}) 
 

 
$('#droppable-area').droppable({ 
 
    accept: '.stamp', 
 
    drop: function (event, ui) { 
 
     $(this).append(ui.helper.clone()); 
 
    } 
 

 
})

.stamp { 
 
    background: lightgrey; 
 
    border: 1px solid green; 
 
} 
 
#draggable-items { 
 
    width: 100%; 
 
    height: 100px; 
 
    margin: 10px; 
 
} 
 
#droppable-area { 
 
    clear: left; 
 
    margin: 10px; 
 
    widows: 100%; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<div id="draggable-items">Draggable items 
 
    <div id="system-label-1" class="btn stamp">1</div> 
 
    <div id="system-label-2" class="btn stamp">2</div> 
 
    <div id="system-label-3" class="btn stamp">3</div> 
 
    <div id="system-label-4" class="btn stamp">4</div> 
 
</div> 
 
<div id="droppable-area">Droppable Area</div>

Answer 3

Вам может понадобиться иметь положение перетаскиваемую в обсаженных установить вручную на позицию объекта Ui на момент ее падения, по отношению к сбрасываемой цели.

// JQ Droppable 
    $(this.el).droppable({ 
    accept: '.stamp', 
    drop: function(event, ui) { 
     $('<div class="btn stamp dropped"></div>') 
     .text(ui.draggable.text()) 
     .appendTo(this) 
     .css({position:"absolute", left:ui.offset.left-this.offsetLeft, top:ui.offset.top-this.offsetTop}); 
    } 
    });