要素のドラッグ中にホバー/マウスオーバー/マウスを検出

Question

要素をドラッグしている間にホバー/マウスオーバー/マウスを検出するにはどうすればよいですか？私は "ドラッグ"要素でそれをホバリングした後、緑のボックスを持っていたい。そのための解決策はありますか？

注：jQuery UIを使用することができますが、自分でやりたいと思います。

$("box").mouseover(function() { 
    $(this).addClass("green"); 
    var box = $(this).attr("id"); 
    $("#result").html(box); 
}); 

$("box").mouseleave(function() { 
    $(this).removeClass("green"); 
}); 

$("drag").bind({ 
    mousedown: function() { 
    $(this).addClass("absolute"); 
    }, 
    mouseup: function() { 
    $(this).removeClass("absolute"); 
    }, 
    mousemove: function(e) { 
    $(this).css({ 
     left: e.pageX - (50/2), 
     top: e.pageY - (50/2) 
    }); 
    } 
}); 

$("body").mousemove(function(event) { 
    $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY); 
}); 

https://jsfiddle.net/38zecoL1/1/

任意の助けてくれてありがとう。

Answer 1

あなたは要素をドラッグする場合、私はあなたがこれを使用することをお勧めしますが、ライブラリhttps://github.com/RubaXa/Sortable

OPTがありますが

chosenClass: "sortable-chosen", // Class name for the chosen item

、あなたは別の色とあなたが望むすべてのものを追加することができ、このクラスで呼び出さJS 。

しかし、あなたが自分でこれを行うにはwanto場合、私は今

Answer 2

私が使用してドラッグされたオブジェクトの上にポインタイベントを無効にしようと

ません：pointer-events: none;。そうすれば、あなたはドラッグされたオブジェクトの代わりに、ホバリングされたオブジェクトのイベントを取得する必要があります。

ただし、moveイベントとmouseupイベントが機能しない状況にも適応する必要があります。

$("box").mouseover(function() { 
 
    $(this).addClass("green"); 
 
    var box = $(this).attr("id"); 
 
    $("#result").html(box); 
 
}); 
 

 
$("box").mouseleave(function() { 
 
    $(this).removeClass("green"); 
 
}); 
 

 
$("#drag").bind({ 
 
    mousedown : function (e) { 
 
     $(document.body).css({ 'user-select': 'none' }) 
 
     var dragged = $(this); 
 
     dragged.css({ 
 
      left : e.pageX - (50/2), 
 
      top : e.pageY - (50/2) 
 
     }); 
 
     dragged.css({ 
 
      'pointer-events' : 'none' 
 
     }) 
 
     var upHandler = function() { 
 
      dragged.removeClass("absolute"); 
 
      dragged.css({ 
 
       'pointer-events' : 'all' 
 
      }) 
 
      $(document.body).css({ 'user-select': 'initial' }) 
 
      $("body").off('mouseup', upHandler); 
 
      $("body").off('mousemove', moveHandler); 
 
     } 
 
     var moveHandler = function (e) { 
 
      dragged.addClass("absolute"); 
 
      dragged.css({ 
 
       left : e.pageX - (50/2), 
 
       top : e.pageY - (50/2) 
 
      }); 
 
     } 
 

 
     $("body").bind({ 
 
      mouseup : upHandler, 
 
      mousemove : moveHandler 
 
     }) 
 
    } 
 
}); 
 

 
$("body").mousemove(function (event) { 
 
    $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY); 
 
});

box { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin: 20px; 
 
} 
 

 
#log { 
 
    position: absolute; 
 
    top: 150px; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
} 
 

 
#drag { 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
    background-color: blue; 
 
} 
 

 
#drag.absolute { 
 
    position: absolute; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<box id="box1"> 
 
    <div id="drag"></div> 
 
</box> 
 
<box id="box2"></box> 
 

 
<div id="result"></div> 
 
<div id="log"></div>

Answer 3

）;あなたはこの短い例は完璧ではないですが、schuldはあなたに良いことを行う方法のヒントを与える

別の場所（例えば身体を）それらをバインドする必要がありますコンテナが緑色のままであり、もう一方が変わらない理由は、ドラッグしている要素が最初のコンテナの子であるということです。マウスが青いドラッグ可能なボックスに入っている間は、青色のボックスは最初のコンテナの子であるため、左のコンテナの内側にあると見なされます。

これを修正する1つの方法は、マウスが画面上のどこにあるか（青いブロックを移動するために既に行っている）を追跡することです。そこには、マウスが他のコンテナのいずれかのバウンディングボックス内にあり、それに基づいてクラスを追加/削除するかどうかをチェックするコードが少し追加されます。次に、マウスの位置に基づいてクラスが追加されます。マウスが子要素であるか子要素でない要素であるかは異なりません。

例：https://jsfiddle.net/38zecoL1/3/

 var boxes = $("box") 
     for(var i = 0; i < boxes.length; i++){ 
     var boundingBox = boxes[i].getBoundingClientRect(); 
     if(e.pageX < boundingBox.right && 
      e.pageX > boundingBox.left && 
      e.pageY < boundingBox.bottom && 
      e.pageY > boundingBox.top){ 
      $(boxes[i]).addClass("green"); 
     } else{ 
      $(boxes[i]).removeClass("green"); 
     } 
     } 

これは、わずか数のdivよりも複雑なページを扱うページに追加する可能性はかなり高価であり、これらのより複雑な状況ではうまく動作しない場合があります。