相对于开始拖动位置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);  
        }
});