Question

I’m using jquery and jQuery ui draggable. I have a handle that appears on hover that’s used to drag a div around. It works well except when it’s dragged very fast. The hover seems to be deactivated and the handle disappears in the middle of the drag. How can I prevent this form happening?

Here is a jsfiddle of what I am talking about: http://jsfiddle.net/JdtsV/1/

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

BTW, I’m using Safari.

---

CSS Only Solution: http://jsfiddle.net/JdtsV/42/

Answer 1

How about setting the containment option?

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

Also see this example.

=== UPDATE ===

On drag start set a class and remove it on drag 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;
}

Also see my updated example.