Question

我有一个基于以下的旋转木马：

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

当你正在抓取和拖动时，你很容易选择文字。如果我在面板中有链接，我会收到悬停消息等...

我想禁用所有这些，因此当您处于拖动过程中时，其余的交互将被禁用。

想法？

Answer 1

创建一个这样的样式类：

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

然后稍微更改Javascript以在mousedown上分配此类。所以从那个未经改动的脚本看起来就像这样。

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

我会用另外一行完成Icchanobot的回答：

-ms-user-select : none

使其适用于Internet Explorer 11 / -

在JQuery插件中拖动元素时禁用悬停，文本选择等

3 个答案: