如何在拖动时启动鼠标hover事件
当我将一个元素拖到我有鼠标hover事件的另一个div上时，该事件不会触发。 但是，如果我将鼠标hover在它上面而不拖动它就可以了。
有没有办法检测元素上的hover事件，如果我在其上拖动另一个？
以下是使用XY坐标解决方案的示例。
关于jsfiddle的工作示例
这个例子可以改进，但是一个很好的起点。
只需跟踪鼠标位置并检查它是否位于可放置对象的任何边界框内。 因此，如果mouseup事件在其中任何一个上触发，则删除拖动的对象。
你也可以使用你拖动的对象的坐标来检测它是否在一个可放置的盒子上，但它需要更多的代码来找到边界框坐标，并且使用鼠标对我来说已经足够了。
代码使用jQuery但没有jQueryUI。 我测试过Chrome，Firefox和Opera，但不是IE 🙂
如果jsfiddle无法访问，我也在这里添加代码。
HTML
Drag orange boxes to grey ones
CSS
.droppable { width:50px; height:50px; float: left; background-color: #DDD; margin: 5px; } .draggable { width:40px; height:40px; float: right; background-color: #FC0; margin: 5px; cursor: pointer; } .dropped { background-color: #FC0; } .somethingover { background-color: #FCD; }
JS
var dragged, mousex, mousey, coordinates = []; var continueDragging = function(e) { // Change the location of the draggable object dragged.css({ "left": e.pageX - (dragged.width() / 2), "top": e.pageY - (dragged.height() / 2) }); // Check if we hit any boxes for (var i in coordinates) { if (mousex >= coordinates[i].left && mousex <= coordinates[i].right) { if (mousey >= coordinates[i].top && mousey <= coordinates[i].bottom) { // Yes, the mouse is on a droppable area // Lets change the background color coordinates[i].dom.addClass("somethingover"); } } else { // Nope, we did not hit any objects yet coordinates[i].dom.removeClass("somethingover"); } } // Keep the last positions of the mouse coord.s mousex = e.pageX; mousey = e.pageY; } var endDragging = function(e) { // Remove document event listeners $(document).unbind("mousemove", continueDragging); $(document).unbind("mouseup", endDragging); // Check if we hit any boxes for (var i in coordinates) { if (mousex >= coordinates[i].left && mousex <= coordinates[i].right) { if (mousey >= coordinates[i].top && mousey <= coordinates[i].bottom) { // Yes, the mouse is on a droppable area droptarget = coordinates[i].dom; droptarget.removeClass("somethingover").addClass("dropped"); dragged.hide("fast", function() { $(this).remove(); }); } } } // Reset variables mousex = 0; mousey = 0; dragged = null; coordinates = []; } var startDragging = function(e) { // Find coordinates of the droppable bounding boxes $(".droppable").each(function() { var lefttop = $(this).offset(); // and save them in a container for later access coordinates.push({ dom: $(this), left: lefttop.left, top: lefttop.top, right: lefttop.left + $(this).width(), bottom: lefttop.top + $(this).height() }); }); // When the mouse down event is received if (e.type == "mousedown") { dragged = $(this); // Change the position of the draggable dragged.css({ "left": e.pageX - (dragged.width() / 2), "top": e.pageY - (dragged.height() / 2), "position": "absolute" }); // Bind the events for dragging and stopping $(document).bind("mousemove", continueDragging); $(document).bind("mouseup", endDragging); } } // Start the dragging $(".draggable").bind("mousedown", startDragging);
在所有提出的答案中，我没有看到最简单明了的答案（也许我在OP问题中遗漏了一些东西）。 但是，如果有人偶然发现这个问题，需要在纯JS中快速简单地解决问题。
您可以通过更改元素className ondragover并更改回原始类ondragleave来实现
my_element.ondragover = function(ev) { ev.preventDefault(); this.className = 'myElem_dragover'; } my_element.ondragleave = function(ev) { ev.preventDefault(); this.className = 'myElem_orig'; }
CSS
.myElem_orig { //this is your initial class for element top: 30px; left: 20px; ..... background-color: blue; } .myElem_orig:hover { //this is hover state, just changing bg color background-color: red; } .myElem_dragover { //new class, needs all attributes from original class top: 30px; left: 20px; ........ background-color: red; //behaves the same like hover does }
编辑：
忘了提，你也需要把原来的class级带回来，否则div会留在dragoverclass
有两种基本方法可以做到这一点：
- 跟踪
mousemove并对x / y坐标做出反应 - 具有比拖动容器更高的
z-index的透明目标
第一个选项根本没有真正使用鼠标hover事件，但会给你相同的净结果。
请注意，某些浏览器（即）不会在透明元素上触发mouseover ，因此您必须通过设置透明的背景图像或将随机图像设置为背景并将其定位在元素外部来伪造它：
element { background: url(/path/to/img) no-repeat -10000px 0; }
jQuery-ui有一个droppable插件 。
当插件与可拖动元素一起使用时，将触发dropover事件，该事件可以绑定到您需要的任何操作。
请参阅Mottie对此问题的回答 （包括演示）
在jsfiddle示例中发现了一个小错误。 当你垂直离开掉落区域时，掉落区域仍然有’somethinghover’类。
替换它
if (mousex >= coordinates[i].left && mousex <= coordinates[i].right) { if (mousey >= coordinates[i].top && mousey <= coordinates[i].bottom) { // Yes, the mouse is on a droppable area // Lets change the background color coordinates[i].dom.addClass("somethingover"); } } else { // Nope, we did not hit any objects yet coordinates[i].dom.removeClass("somethingover"); }
修改emrahgunduz发布的代码，特别是for循环，您还可以管理嵌套的可放置区域。
var dragged, mousex, mousey, coordinates = []; var continueDragging = function(e) { // Change the location of the draggable object dragged.css({ "left": e.pageX - (dragged.width() / 2), "top": e.pageY - (dragged.height() / 2) }); // Check if we hit any boxes for (var i = coordinates.length - 1; i >= 0; i--) { if (mousex >= coordinates[i].left && mousex <= coordinates[i].right) { if (mousey >= coordinates[i].top && mousey <= coordinates[i].bottom) { // Yes, the mouse is on a droppable area // Lets change the background color $('.droppable').removeClass("somethingover"); coordinates[i].dom.addClass("somethingover"); break; } } else { // Nope, we did not hit any objects yet coordinates[i].dom.removeClass("somethingover"); } } // Keep the last positions of the mouse coord.s mousex = e.pageX; mousey = e.pageY; }; var endDragging = function(e) { // Remove document event listeners $(document).unbind("mousemove", continueDragging); $(document).unbind("mouseup", endDragging); // Check if we hit any boxes for (var i = coordinates.length - 1; i >= 0; i--) { if (mousex >= coordinates[i].left && mousex <= coordinates[i].right) { if (mousey >= coordinates[i].top && mousey <= coordinates[i].bottom) { // Yes, the mouse is on a droppable area droptarget = coordinates[i].dom; droptarget.removeClass("somethingover").addClass("dropped"); dragged.hide("fast", function() { $(this).remove(); }); } } } // Reset variables mousex = 0; mousey = 0; dragged = null; coordinates = []; }; var startDragging = function(e) { // Find coordinates of the droppable bounding boxes $(".droppable").each(function() { var lefttop = $(this).offset(); // and save them in a container for later access coordinates.push({ dom: $(this), left: lefttop.left, top: lefttop.top, right: lefttop.left + $(this).width(), bottom: lefttop.top + $(this).height() }); }; // When the mouse down event is received if (e.type == "mousedown") { dragged = $(this); // Change the position of the draggable dragged.css({ "left": e.pageX - (dragged.width() / 2), "top": e.pageY - (dragged.height() / 2), "position": "absolute" }); // Bind the events for dragging and stopping $(document).bind("mousemove", continueDragging); $(document).bind("mouseup", endDragging); } // Start the dragging $(".draggable").bind("mousedown", startDragging);