Javascript 如何在拖动时启动鼠标悬停事件

当我将一个元素拖到另一个有mouseover事件的

div

上时，该事件不会触发。但是，如果我将鼠标悬停在它上面而不拖动它，它就会工作

---

如果在元素上拖动另一个悬停事件，是否有方法检测该元素上的悬停事件？

有两种基本方法：

跟踪鼠标移动并对x/y坐标作出反应

具有比拖动容器具有更高的

z-index

的透明目标

第一个选项实际上根本不使用mouseover事件，但会给您相同的净结果

请注意，某些浏览器（ie）不会在透明元素上触发

mouseover

，因此您必须通过设置透明的背景图像或将随机图像设置为背景并将其放置在元素外部来伪造它，如下所示：

element {
 background: url(/path/to/img) no-repeat -10000px 0;
}

---

下面是一个使用X-Y坐标解的示例

这个例子可以改进，但这是一个很好的起点

只需跟踪鼠标位置并检查它是否出现在可拖放对象的任何边界框内。因此，如果mouseup事件在其中任何一个上触发，则拖放的对象将被丢弃

您也可以使用正在拖动的对象的坐标来检测其是否位于可拖放框上，但它需要更多的代码来查找边界框坐标，使用鼠标对我来说就足够了

代码使用jQuery，但不使用jQueryUI。 我在Chrome、Firefox和Opera上进行了测试，但没有IE:）

如果JSFIDLE不可访问，我也会在这里添加代码

HTML

JS

var拖动，mousex，mousey，坐标=[]；
var continueDragging=函数（e）{
//更改可拖动对象的位置
1.css({
“左”：e.pageX-（拖动的.width（）/2），
“顶部”：e.pageY-（拖动的.height（）/2）
});
//检查我们是否击中任何框
用于（坐标中的变量i）{
如果（mousex>=坐标[i]。左&&mousex=坐标[i]。顶部&&mousey=坐标[i]。左&&mousex=坐标[i]。顶部&&mouseyjQuery ui对此有一个定义

该插件与一个下拉菜单一起使用时将触发
事件，该事件可以绑定到您需要的任何操作

请参阅（包括演示）
稍微修改一下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);

var拖动，mousex，mousey，坐标=[]；
var continueDragging=函数（e）{
//更改可拖动对象的位置
1.css({
“左”：e.pageX-（拖动的.width（）/2），
“顶部”：e.pageY-（拖动的.height（）/2）
});
//检查我们是否击中任何框
对于（var i=coordinates.length-1；i>=0；i--）{
如果（mousex>=坐标[i]。左&&mousex=坐标[i]。顶部&&mousey=0；i--）{
如果（mousex>=coordinates[i]。left&&mousex=coordinates[i]。top&&mousey在所有给出的答案中，我看不到最简单和最明显的一个（也许我在OP问题中遗漏了一些东西）。但是，如果有人后来偶然发现了这一点，并且需要纯JS中快速简单的解决方案

您可以通过更改元素classNameondragover，然后更改回原始类ondraglave

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
}

编辑：

忘了提及，您还需要带回原始类ondrop，否则div将留在dragover类中
在JSFIDLE示例中发现一个小bug。
当您垂直离开放置区域时，放置区域仍然具有“somethinghover”类


替换这个


if（mousex>=coordinates[i]。left&&mousex=coordinates[i]。top&&mousey拖动的元素何时阻止其下元素上的悬停或鼠标事件的另一种可能解决方案：

指针事件：无；

如果这应用于被拖动的元素，那么hover应该仍然适用于下面的元素。
您使用的是jQuery UI吗？不，我使用的是自定义创建的draggIt，这将有助于查看该代码。将其放入问题中或将其粘贴到中。如果将鼠标悬停在另一个元素覆盖的元素上，则不会触发鼠标悬停事件（除非覆盖元件是元件的子元件，在这种情况下，它会起泡）。恐怕您必须按X和Y位置执行任何操作。X和Y坐标是一项非常繁琐的工作，而且非常容易出错。只需将拖动的元素放置在光标旁边，这样它就不会阻止鼠标与后面的元素交互。这可能会干扰正在拖动的元素，具体取决于h的方式e已经设置好了。一开始我有点怀疑，但这项技术对我来说效果很好-非常感谢！我认为这个问题是在内置HTML可拖动属性广泛使用之前提出的，这绝对是最简单的方法，除非你在做自定义行为。这是我想要的，不是任何自定义行为。谢谢。我这个答案每天都很好，我觉得很快就会流行起来。dragover/Dragoot的一个缺点是，据我所知，它不能告诉你悬停在元素的哪一边。假设它是一个你正在拖放排序的项目列表，如果你悬停在某个项目的上半部分，你会想将内容拖到其中放置在该项目上方。但您只能看到您在该项目上悬停，现在是。@AndyMercer在
dragOver
事件中的位置。您可以测试鼠标的一半在哪个位置，向上或向下，并根据该位置做出决定。使用
对象。getBoundingClientRect（）
例如，您得到底部边框，然后从中减去鼠标Y坐标。您得到的值大于或等于对象高度/2
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);

my_element.ondragover = function(ev) {  
 ev.preventDefault();  
 this.className = 'myElem_dragover';  
}  
my_element.ondragleave = function(ev) {  
 ev.preventDefault();  
 this.className = 'myElem_orig';  
}

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