相對於開始拖動位置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'/>

JQUERY

$(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鏈接