2

このフィドルから始めて、常に {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');  
    }
});

だから私は2つの問題があります:

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

しかし、ドラッグの開始時に 1 つだけ、ドラッグの終了時に 1 つだけではなく、現在のマウス座標を継続的に出力する方法がまだわかりません。

4

2 に答える 2