Jquery сопротивления, падение и клонировать правильное позиционирование

Question

ОБНОВЛЕНО

Fiddle Здесь:

jsfiddle here

full-screen-result

ПРИМЕЧАНИЕ: Я новичок на скрипке, и я как-то интегрировать мой код скрипка, но перетаскивание на нее не работает.

Привета я реализовал перетаскивать и функцию клонирования с помощью Jquery перемещаемых и небьющихся функций выглядят следующим образом:

$(".dragSigners").draggable({ 
    helper: 'clone', 
    cursor: 'move', 
    tolerance: 'fit', 
    revert: true 
}); 

Примечание: $("#document-reader") является прокручивать дела. Я хочу перетащить элемент в любом месте этого div сверху вниз. Я могу прокрутить родительский div и перетащить элемент в середине div. И он должен стоять там, где я его тащил.

$("#document-reader").droppable({ 
    accept: '.dragSigners', 
    activeClass: "drop-area", 

    drop: function(e, ui) { 
    dragEl = ui.helper.clone(); 
    ui.helper.remove(); 

    document_id = dragEl.data("document-id"); 
    signer_id  = dragEl.data("signer-id"); 
    stopPosition = dragEl.position(); 
    dragEl.data("signer-id", signer_id); 

    dragEl.draggable({ 
     helper: 'original', 
     cursor: 'move', 
     tolerance: 'fit', 
     drop: function (event, ui) { 
     $(ui.draggable).remove(); 
     } 
    }); 

    // append element to #document-reader 
    dragEl.addClass("dragMe"); 
    dragEl.removeClass("dragSigners col-sm-6"); 
    dragEl.find("span.closeIt").removeClass("hideIt"); 
    dragEl.appendTo('#document-reader'); 

    // ajax call for updating position to database for future reference 
    updateDropPosition(dragEl, stopPosition, signer_id, document_id) 
    } 
}); 

Это правильно перетащить элемент, clonning его и уронить.

ПРОБЛЕМА

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

console.log(dragEl.position()) 

output: Object { top=-5, left=-5} // [NOTE: it doesn't matter where ever I drop element, It is showing top and left as -5. and it is not showing dropped element in the exact same place where I dropped it] 

Не знаю, в чем проблема с моим кодом.

ОЖИДАЕМЫЕ РЕЗУЛЬТАТЫ:

Пожалуйста аут этих скриншотов:

1) Это происходит прямо сейчас (неправильное поведение)

2) Ожидаемое поведение:

Answer 1

Я решил проблему, добавив dragMe и parent в родительском перетаскиваемом элементе.

Теперь используйте класс dragSigners для перетаскивания и клонирования. И используйте dragMe для перетаскивания вновь клонированного элемента. Также установите dragMeposition: relative.

Здесь полный

jsfiddle

полный вывод на экран: jsfiddle full screen output

[Примечание: Я открыл новую проблему, перейдите по ссылке для этой проблемы: jquery drag, drop and clone, find dropped position of element