2

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/

4

4 に答える 4

2

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;
}

私の更新された例も参照してください。

于 2012-04-17T06:23:37.103 に答える
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");
        }
    });
});​
于 2012-04-17T06:26:41.300 に答える
0

「フラグ」を使用して 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 デモ

于 2012-04-17T06:01:53.803 に答える
0

マウスの素早い動きの問題は、マウス カーソルの下で div がレンダリングされる機会さえ得る前に、実際にホバーを解除するほど速いことです。したがって、CSS で次のように置き換えます。

 .outline .dragHandle {

と：

 .outline .dragHandle, .dragHandle:active {

このように、ハンドルをクリックしたままにすると、ハンドルが消えません。

于 2012-04-17T06:28:13.177 に答える