防止拖动时手柄消失答案

【问题标题】：Prevent handle from disappearing when dragging防止拖动时手柄消失
【发布时间】：2012-04-17 05:59:45
【问题描述】：

我正在使用可拖动的 jquery 和 jQuery ui。我有一个出现在悬停上的句柄，用于拖动 div。它工作得很好，除非它被拖得非常快。悬停似乎已停用，并且手柄在拖动中间消失了。我怎样才能防止这种形式发生？

这是我在说什么的 jsfiddle：http://jsfiddle.net/JdtsV/1/

    $(function() {
        $("#handle").draggable({handle: "dragHandle"}).hover(function(){
             $(this).toggleClass("outline");
        });          
    });

顺便说一句，我正在使用 Safari。

纯 CSS 解决方案：http://jsfiddle.net/JdtsV/42/

【问题讨论】：

有点晚了，但我也贡献了一个答案 :) 快乐编码

标签： javascript jquery jquery-ui

【解决方案1】：

如何设置containment 选项？

$(function() {
    $("#handle").draggable({
        handle: "dragHandle",
        containment: "parent"
    });
});

另见this example。

=== 更新 ===

拖动start设置一个类并在拖动stop删除它：

JS：

$(function() {
    $("#handle").draggable({
        handle: "dragHandle",
        containment: "parent",
        start: function() {
            $('.dragHandle').addClass('test');
        },
        stop: function() {
            $('.dragHandle').removeClass('test');
        }

    });
});

CSS：

.handle:hover .dragHandle, .test {
    width:25px;
    height:25px;
    background-color: #842899;
    position: absolute;
    left:0;
    top:-25px;
    cursor: move;
    display: inline-block;
}

另见my updated example。

【讨论】：

在快速移动鼠标时仍然消失。
更新是可靠的，它比悬停更可靠。谢谢，兄弟。
使用您的解决方案的相同概念，我想出了另一个仅使用 CSS 的解决方案。 jQuery UI draggable 在拖动的时候给父容器添加了一个“ui-draggable-dragging”类。然后我可以执行“.ui-draggable-dragging .dragHandle”并使可见性取决于存在的类而不是使用额外的 JS。这是一个工作版本：jsfiddle.net/JdtsV/42

【解决方案2】：

jsFiddle：http://jsfiddle.net/JdtsV/39/

$(function()
{
    var isMouseDown = false;

    $("#handle").draggable(
    {
        handle: "dragHandle"
    });

    $("#handle").mousedown( function()
    {
        isMouseDown = true;
        $(this).addClass("outline");
    });

    $("#handle").mouseup( function()
    {
        isMouseDown = false;
    });

    $("#handle").hover( function()
    {
        $(this).addClass("outline");
    },
    function()
    {
        if ( isMouseDown == false )
        {
            $(this).removeClass("outline");
        }
    });
});

【讨论】：

这绝对有效......但是，伙计，处理这么小的事情就是这么多的js（不是专门抱怨你的工作）。

【解决方案3】：

快速鼠标移动的问题在于它是如此之快以至于它实际上在 div 甚至有机会在鼠标光标下呈现之前就取消了悬停。所以，在 CSS 中替换：

 .outline .dragHandle {

与：

 .outline .dragHandle, .dragHandle:active {

这样当手柄一直点击时，它不会消失。

【讨论】：

这很聪明。不幸的是，它看起来仍然在消失。 jsfiddle.net/JdtsV/40
是的，虽然它可能无法跨浏览器工作。它适用于 Opera。

【解决方案4】：

我使用“标志”来捕获 mousedown 事件，并默认将 .dragHandle 设置为 CSS：display:none;

var holded = false;
$('.handle').on('mouseenter mouseleave',function(e){
   (e.type==='mouseleave' && holded===false) ? $('.dragHandle').hide() :  $('.dragHandle').show() ;
}).on('mousedown mouseup',function(e){
    e.type==='mousedown' ? holded=true: holded=false;
});

$(".handle").draggable({handle: "dragHandle"});

jsFiddle demo

【讨论】：