Starting off of this fiddle I'd like to output the coordinates of the draggable object, as it's dragged, relative to its starting position, which is always {0,0}. I know I can log the beginning and end drag events like:

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

So I have two problems:

1.How do I get the mouse coordinates?

2.How do I continue to output the mouse coordinates until the dragEnd function is called?

Edit:

For 1. I can now get the mouse coordinates using:

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

But I still am not sure how to continually output the current mouse coordinates, rather than only one when the drag starts and once when the drag ends.

Starting off of this fiddle I'd like to output the coordinates of the draggable object, as it's dragged, relative to its starting position, which is always {0,0}. I know I can log the beginning and end drag events like:

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

So I have two problems:

1.How do I get the mouse coordinates?

2.How do I continue to output the mouse coordinates until the dragEnd function is called?

Edit:

For 1. I can now get the mouse coordinates using:

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

But I still am not sure how to continually output the current mouse coordinates, rather than only one when the drag starts and once when the drag ends.

• javascript
• jquery
• css
• html
• ember.js

• 1 event.pageX and evet.pageY will give the mouse position. drag event will continue to output the mouse coordinates – Harsha Venkataramu Commented Oct 17, 2013 at 19:51
• When I do console.log('begin coordinates: ', event.pageX, event.pageY); I get "begin coordinates: undefined, undefined" – JuJoDi Commented Oct 17, 2013 at 19:56

2 Answers 2

Try this

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

This code shows the coordinates of the mouse on drag

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 LINK