Detect hover / hover / mouse while dragging element
How to detect hover / hover / mouse when dragging an element? I want to have a green box after hovering it with a "drag and drop" element. Is there any solution for this?
Note. I know I can use jQuery UI for it, but I want to do it myself.
$("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/
Thanks for any help.
source to share
I tried to turn off the indicator on the events drag objects using: pointer-events: none;
. This way you should receive hover events, not drag and drop.
But you also need to adapt to a situation where the move and mouseup events won't work. You will have to bind them elsewhere (like body)
This short example isn't perfect, but schuld gives you a hint on how to do it better;)
$("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>
source to share
The reason the container stays green and the other doesn't change is because the item you are dragging is a child of the first container. Thus, while your mouse is in the blue dragged box, it is still viewed inside the container on the left, because the blue box is a child of the first container.
One way to fix this (and most likely not the best way) is to track where the mouse is on the screen (which you are already doing to move the blue block). There if you add some code checking if the mouse is in the bounding box of any of the other containers and add / remove classes based on that. The classes will then be added based on the position of the mouse, not whether the mouse is over an element that is a child or not.
Example: 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");
}
}
It is likely quite expensive to add to a page that deals with a more complex page than multiple divs and may not perform well in these more complex situations.
source to share
If you want to drag and drop an element, I recommend you use this JS library https://github.com/RubaXa/Sortable
There is an option called
chosenClass: "sortable-chosen", // Class name for the chosen item
and in this class you can add another color and whatever you want.
But if you want to do it yourself, I am not now
source to share