Question

我正在使用jquery和jQuery ui draggable。我有一个悬停时出现的手柄，用于拖动div。除非拖得很快，否则效果很好。悬停似乎已停用，手柄在拖动过程中消失。我该如何防止这种形式发生？

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

BTW，我正在使用Safari。

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

Answer 1

如何设置containment选项？

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

另见this example。

=== UPDATE ===

在拖动 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。

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

我使用'flag'来捕获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

Answer 4

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

 .outline .dragHandle {

使用：

 .outline .dragHandle, .dragHandle:active {

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

拖动时防止手柄消失

4 个答案:

jsFiddle demo