Wesley Wesley - 4 months ago 41
Javascript Question

Disable hover, text select, etc when dragging an element in JQuery plug in

I have a carousel based off of:


When you are in the process of grabbing and dragging, you're apt to select text. If I have links in the panels, I get the hover message, etc...

I would like to disable all that, so when you are in the process of dragging, the rest of the interaction is disabled.



Create a style class like this:

.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -ms-user-select : none

Then alter the Javascript slightly to assign this class on mousedown. So from that unaltered script it would look like this.


    //Mouse down bind move event
    $(".content-box").bind("mousedown", function(e){
            $(this).bind("mousemove", iPhoneAnimation.moveInfo);
            $(this).addClass("unselectable");  // <-- ADD THIS

    //Unbind mouse event
    $(".content-box").bind("mouseup", function(e){
        var $this = $(this);

        $this.unbind("mousemove", iPhoneAnimation.moveInfo);
        //Animate the panel
        //Reset the private var

        $(this).removeClass("unselectable"); // <-- AND ADD THIS

For disabling hovers you need to unbind the events on mousedown like this:

$(this).unbind('mouseenter mouseleave');

Then rebind them again on mouseup as above.