Question

有没有办法在dragover / dragenter / dragleave事件中获取与页面相关的X和Y方面的拖动项目位置？我知道我可以通过调用event.clientX或event.clientY来获取鼠标位置，但我想知道由拖动创建的浮动元素的位置（可以由{{1设置的那个）功能）

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

event.dataTransfer.setDragImage()

Answer 1

借助jQuery库，您可以实现它，您可以使用控制台打印值，只是为了向您显示我在屏幕上的打印位置。

＆＃13;

$('#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));
        }
    
    });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

html5拖放，拖动项目位置

1 个答案: