javascript - 跟踪鼠标相对于起始拖动位置 HTML5, Ember

Question

从这个小提琴开始，我想输出可拖动对象的坐标，因为它被拖动，相对于它的起始位置，它总是 {0,0}。我知道我可以记录开始和结束拖动事件，例如：

DragNDrop.Draggable = Ember.Mixin.create({
    attributeBindings: 'draggable',
    draggable: 'true',
    dragStart: function(event) {
        var dataTransfer = event.originalEvent.dataTransfer;
        dataTransfer.setData('Text', this.get('elementId'));
        console.log('begin coordinates: (0, 0)');
    },
    dragEnd: function(event) {
        console.log('end coordinates');  
    }
});

所以我有两个问题：

1.如何获取鼠标坐标？

2.如何继续输出鼠标坐标直到调用dragEnd函数？

编辑：

对于 1. 我现在可以使用以下方法获取鼠标坐标：

DragNDrop.Draggable = Ember.Mixin.create({
    attributeBindings: 'draggable',
    draggable: 'true',
    dragStart: function(event) {
        var dataTransfer = event.originalEvent.dataTransfer;
        dataTransfer.setData('Text', this.get('elementId'));
        console.log('begin coordinates: ', event.originalEvent.pageX, event.originalEvent.pageY);
    },
    dragEnd: function(event) {
        console.log('end coordinates: ', event.originalEvent.pageX, event.originalEvent.pageY);  
    }
});

但是我仍然不确定如何持续输出当前的鼠标坐标，而不是在拖动开始时只输出一个，在拖动结束时输出一次。

Answer 1

尝试这个

DragNDrop.Draggable = Ember.Mixin.create({
    attributeBindings: 'draggable',
    draggable: 'true',
    dragStart: function(event) {
        var dataTransfer = event.originalEvent.dataTransfer;
        dataTransfer.setData('Text', this.get('elementId'));
        console.log('begin coordinates: ', event.originalEvent.pageX, event.originalEvent.pageY);
        },
        // track the drag
        drag: function(event) {
            console.log('tracking coordinates: ', event.originalEvent.pageX,  event.originalEvent.pageY); 
        },
        dragEnd: function(event) {
            console.log('end coordinates: ', event.originalEvent.pageX, event.originalEvent.pageY);  
        }
});

Answer 2

此代码显示鼠标在拖动时的坐标

HTML

<div id= 'draggable'></div>
<input type = 'text' value = 'test' id='myInput'/>

查询

$(document).ready(function(e){
    $('#draggable').draggable();
    $('#draggable').on('drag' , function(event){
        $('#myInput').val(event.pageX + ',' + event.pageY);
    })
})

CSS

#draggable
{
    background-color:#EEE;
    width:200px;
    height:200px;
}

JSFIDDLE 链接