Как найти положение перетаскиваемого элемента относительно области сбрасывания

Question

Я использую drag-and-drop для HTML5.

У меня возникли проблемы с поиском положения перетаскиваемого элемента относительно его родительского контейнера.

Резюме Задача

У меня есть "позиция: относительная" DIV, который я считаю 'Droppable область'. Внутри этого div у меня есть несколько «позиционных: абсолютных» элементов изображения, которые я обозначил как перетаскиваемые. Я хочу, чтобы эти изображения свободно перемещались пользователем.

Чтобы установить положение элемента, у меня есть слушатель на «dragend».

Конечные верхние/левые переменные должны быть процентными, а не пикселями.

Текущая Покушение

Ниже вы можете увидеть мою попытку:

draggable.addEventListener('dragend', function (event) { 
event.preventDefault(); 

//Gets the position of the two elements relative to the viewport 
var droppableBoundingRect = droppable.getBoundingClientRect(); 

//Establishes the percentage using the droppable height and width 
var draggableXPercentage = ((event.clientX - droppableBoundingRect.left)/droppable.clientWidth) * 100; 
var draggableYPercentage = ((event.clientY - droppableBoundingRect.top)/droppable.clientHeight) * 100; 

//Set the positional elements of the draggable element 
event.target.style.top = draggableYPercentage + "%"; 
event.target.style.left = draggableXPercentage + "%"; 
}, false); 

А вот JSFiddle, что я надеялся на работу, с комментариями, показывая, что я ожидал, что каждый сегмент сделать:

https://jsfiddle.net/oL8yd9Lr/

Возможно, я смотрю на то дерево, в заблуждении лес. Буду признателен за любое руководство.

Answer 1

Найденное решение. Это не идеально, но должно показать, как вы можете получить относительное положение. Возможно, я немного за борт, но я прокомментировал важные части.

Fiddle

; 
(function($, undefined) { 
    var dragging; 

    $(function() { 
    $('.dropzone').on({ 
     'dragover dragenter': dragover, 
     'drop': drop 
    }).on({ 
     'dragstart': dragstart, 
     'dragend': dragend 
    }, '.drag'); 
    }); 

    function dragstart(e) { 
    e.stopPropagation(); 
    var dt = e.originalEvent.dataTransfer; 
    if (dt) { 
     dt.effectAllowed = 'move'; 
     dt.setData('text/html', ''); 
     dragging = $(this); 
     // Set the position of the mouse relative to the element at 0,0 
     dt.setDragImage(dragging.get(0), 0, 0); 
    } 
    } 

    function dragover(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    var dt = e.originalEvent.dataTransfer; 
    if (dt && dragging) { 
     dt.dropEffect = 'move'; 
     dragging.hide(); // Hide the element while dragging 
    } 
    return false; 
    } 

    function drop(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    if (dragging) { 
     var dropzone = $(this); 
     // Get the offset of the dropzone relative to the window 
     var offset = dropzone.offset(); 
     // Set the offset of the drag relative to the dropzone 
     dragging.css({ 
     'top': e.clientY - offset.top, 
     'left': e.clientX - offset.left 
     }); 
     dragging.trigger('dragend'); // Trigger the dragend 
    } 
    return false; 
    } 

    function dragend(e) { 
    if (dragging) { 
     dragging.show(); 
     dragging = undefined; 
    } 
    } 
}(jQuery));