0

I want to make 'dragstart' work like a click. Example:

// 1. Get the click position
$('#foo').on('click',function(e){ alert(e.pageX+':'+e.pageY);} 

// 2. Get dragstart position, nothing more
$('#foo').on('dragstart',function(e){ alert(e.pageX+':'+e.pageY);}

Thats what i want to achieve .

But ofcourse second example does not work, i dont know how to make it possible. Simply , I need to get the coords of point of dragstart.

I use jQuery Mobile also, so perhaps it has some methods that I can use? I'd like to achieve this without any other libraries, so pure jQuery would be best solution.

Why? The thing is, that sometimes users click on specific elements fast - and because of this, they fire dragstart event instead of click. And to exegute my function I need the position , where the event triggered.

EDIT:

I solved this problem using mousedown event instead of dragstart. Mousedown gives the coords of click properly , but it still would be nice to know is there a way to get the coords of dragstart.

wopolow
  • 365
  • 4
  • 16

2 Answers2

1
$("#foo").draggable({
    create: function (e, ui) {
        $('#foo').on('click', function (event) {
            alert('click: ' + event.pageX + ':' + event.pageY);
        });
        $('#foo').on('dragstart', function (event) {
            alert('dragstart: ' + event.pageX + ':' + event.pageY);
        });
    }
});
nilsole
  • 1,663
  • 2
  • 12
  • 28
  • Is draggable() method is part of a jQueryUI? I'd like to find a solution to my problem without this library, simply because i dont use it and i dont know if i want to include it all just to have one method – wopolow Apr 04 '14 at 19:25
  • I thought so. I need 'dragstart' to get position, simply because if someone fires app in desktop browser, sometimes can init dragging not the click event. App works fine on mobile devices for now. – wopolow Apr 04 '14 at 19:29
  • The API Doc for draggable says that the create event is "Triggered when the draggable is created". So in case the plugin loads properly, everything should be fine. In any case, to me it makes more sense to listen to click or dragstart, not both. Depends on what you need. – nilsole Apr 04 '14 at 19:33
  • Ok, your are right! Interesting. Dragging does not mean clicking: http://jsfiddle.net/8CX9g/1/ – nilsole Apr 04 '14 at 19:39
  • It works, but still with UI :( When i try to do it in raw jQuery, e.pageX is undefinied, simply because dragstart is different event then click... Perhaps is there a way to 'simulate click' at specific position? I mean, if id calculated the dragstart position based on the position of element in DOM, can I do something like - exeguteClickAt(coordsX,coordsY)? – wopolow Apr 04 '14 at 21:01
  • 1
    If you really want to avoid jQuery UI, you might find a solution here: http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/ This also comes with event handling for mousedown and mouseup, it might be just suitable. – nilsole Apr 04 '14 at 21:05
  • Well! Thanks for link - i'm not going to use this soultion, however it reminded me of other element, that can fit to solve my problem. I'll just bind my function to mousedown event instead of dragstart - it should work pretty much the same, maybe with a little difference, but work. – wopolow Apr 04 '14 at 21:11
0

You can call draggable() from jQuery.UI, it has a property called start on which you can bind a function to get the coordinates.

Example:

$('#foo').draggable({
    [other options]
    start: function(event) {
               alert(event.clientX+':'+event.clientY);
         }
});

Source: JQuery UI Draggable how to get drag start position

Community
  • 1
  • 1
Venom
  • 331
  • 2
  • 4
  • Thanks, but i wonder is there a way to achieve this without including jQueryUI to my app? I use jQuery mobile in it, perhaps it has some methods that i could use? – wopolow Apr 04 '14 at 19:22
  • How do you actually drag your elements? With jquery only I don't think you can. – Venom Apr 04 '14 at 19:28
  • 1
    I do not drag elements intentionally. My app is a game and sometimes when users play it on desktop browsers, they initialize dragstart instead of click , because they have to click on elements fast. And my goal is to get position of dragstart, or simulate click itself. – wopolow Apr 04 '14 at 19:32