javascript - 防止拖动时手柄消失

Question

我正在使用 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/

Answer 1

如何设置containment选项？

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

另请参阅此示例。

=== 更新 ===

在拖动 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;
}

另请参阅我更新的示例。

Answer 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");
        }
    });
});​

Answer 3

我使用“标志”来捕获 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 演示

Answer 4

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

 .outline .dragHandle {

和：

 .outline .dragHandle, .dragHandle:active {

这样当手柄保持点击时，它不会消失。