javascript - html5拖拽，获取拖拽item位置

Question

有什么方法可以根据与页面相关的X和Y来获取//dragover事件中拖动的项目位置？我知道我可以通过调用or获得鼠标位置，但我想知道拖动创建的浮动元素的位置（可以通过函数设置的那个）dragenterdragleaveevent.clientXevent.clientYevent.dataTransfer.setDragImage()

例如，此代码将在拖动时打印鼠标位置，而不是浮动元素的实际偏移量：

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

标签： javascripthtmldrag-and-drop

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>