Disable hovering, text selection, etc. When dragging an item in jQuery

Question

I have a carousel based on:

http://nooshu.com/explore/jquery-iphone-animation/

When you are in the process of grabbing and dragging, you can select text. If I have links in panels, I get a hover message, etc.

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

Ideas?

Answer 1

Create a style class as follows:

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

Then slightly modify Javascript to assign this class to mousedown. Thus, from this unchanged script, it will look like this.

jQuery(function($){
    //Initialise
    iPhoneAnimation.init();

    //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
        iPhoneAnimation.panelAnimate($this);
        //Reset the private var
        iPhoneAnimation.resetVars();

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

mousedown :

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

mouseup, .

Answer 2

document.onmousemove = function(ev)
{
    ev.preventDefault();
    /*
    move it
    */
}

Answer 3

I would end Icchanobot's answer with another line:

-ms-user-select : none

To make it work with Internet Explorer 11 / -