html5 drag and drop, получение позиции перетаскиваемого элемента

Question

есть ли способ получить позицию перетаскиваемого элемента в событиях dragover / dragenter / dragleave в терминах X и Y, связанных со страницей? я знаю, что могу получить положение мыши, вызывая event.clientX или event.clientY, но я хотел бы знать положение плавающего элемента, созданного перетаскиванием (тот, который может быть установлен функцией event.dataTransfer.setDragImage())

например, этот код будет печатать местоположение мыши при перетаскивании, а не реальное смещение плавающего элемента:

function dragOver(event) {
   console.log(event.clientX
});

Answer 1

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

$('#dragMe').draggable(
    {
        containment: $('body'),
        drag: function(){
            var position = $(this).position();
            var xPos = position.left;
            var yPos = position.top;
            $('#positionX').text('positionX: ' + xPos);
            $('#positionY').text('positionY: ' + yPos);
        },
         accept: '#dragMe',
        over : function(){
            $(this).animate({'border-width' : '5px',
                             'border-color' : '#0f0'
                            }, 500);
            $('#dragThis').draggable('option','containment',$(this));
        }
    
    });

#dragMe {
    width: 10em;
    height: 6em;
    padding: 0.5em;
    border: 4px solid #ccc;
    border-radius: 0 2em 2em 2em;
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}

#dropMe {
    width: 12em;
    height: 12em;
    padding: 0.5em;
    margin: 0 auto;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dragMe">
<p>DRAG ME</p>
    <ul>
        <li id="positionX"></li>
        <li id="positionY"></li>
        
    </ul>
</div>

<div id="dropMe"></div>