Trigger Click-and-Hold Event

Question

QUESTION:

Using jQuery, how can I imitate a click-and-hold event?

---

I am currently beating my head against a wall and cannot seem to figure out how to go about this!

I have also tried searching on google and in forums, but to no avail.

In my current example, I am using jQuery UI's .draggable().

Ideally, I would like to do the following:

• Perform a click/mousedown on the div.
• Imitate a click-and-hold event and be able to move the element freely.
• On next click/mousedown, end click-and-hold event.

When I try functions like:

$("#drag").draggable().mousedown(function(e){
    e.preventDefault();
    return $(this).mousedown();
});

It then causes an infinite loop, which will eventually result in the browser crashing. However, I am not sure how one would go about initiating a constant .mousedown() event.

Here is a demo of what I currently have: http://jsfiddle.net/vPruR/16/ .

Any help would be greatly appreciated!

Solution 1

I don't think there is some option to simulate the click-and-hold. Also it may create too much browser dependency.

So you could try something as below.

var click = false,
top = null,
left = null;

$(document).bind('mousemove', function (e) {
   if (click == true) {
      $('#drag').css({
         left: e.pageX - left,
         top: e.pageY - top
       });
    }
});

$('#drag').draggable().click(function(e) {
    top = e.pageY - $('#drag').position().top; 
    left = e.pageX - $('#drag').position().left;
    click = !click;
    return false;
});

$('html').click(function() {
    click = false;
});

DEMO: http://jsfiddle.net/dirtyd77/qbcQn/

Solution 2

Wolf and Dom's solutions work great and are the basis for my solution, but you mentioned you were using jquery ui's draggable, so here is a possible solution using jquery ui's draggable object in conjunction with a droppable. I was trying to get the droppable's events to fire when a draggable dragged over them and dropped on them, so I utilized the built-in/private functions of the ui.mouse object that draggable inherits from and overrides.

$(document).ready(function(){
      var click = false

    $(document).bind('mousemove', function (e) {
        if (click == true) {
           $('#drag').data('uiDraggable')._mouseDrag(e);
        }
    });

    $('#drag').draggable().click(function(e) {
        if(!click){
            $(this).data('uiDraggable')._mouseCapture(e, true)
            $(this).data('uiDraggable')._mouseStart(e, true, true);
        }else{
            $(this).data('uiDraggable')._mouseUp(e);
            $(this).data('uiDraggable')._mouseStop(e);
        }
        click = !click;
        return false;
    });

    $('html').click(function() {
        click = false;
    });
});

Heres a fiddle. To see the droppable stuff, just uncomment the droppable stuff in the js.

Note: this solution is for the current jquery ui version (1.9.2), but may change in future versions because it does use private calls.

Comments

[Dom]

Your solution made the initial click choppy since it snaps to the mouse location. I made some corrections and added it to your post. Thank you again!

[Wolf]

Welcome... and happy coding... :) You could also unbind and bind the mosemove event whenever required to make it more efficient...

[Dom]

Thank you, sir. You simplified a very difficult problem!

[Dale]

Great stuff; I had to modify slightly to contain the drag within another div but it was simply a case of checking bounds before modifying the top and left positions. Thanks!