javascript - 防止拖动时 handle 消失

Question

我正在使用 jquery 和 jQuery ui 可拖动。我有一个悬停时出现的 handle ，用于拖动 div。除非拖动速度非常快，否则它效果很好。悬停似乎已停用， handle 在拖动过程中消失。如何防止这种情况发生？

这是我正在谈论的内容的一个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

如何设置遏制选项？

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

另请参阅this example .

===更新===

在拖动时开始设置一个类并在拖动时删除它停止:

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 .