Question

如何在拖动元素时检测悬停/鼠标悬停/鼠标中心？用“drag”元素悬停后我想要绿色框。对此有什么解决方案吗？

注意：我知道我可以使用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

我会尝试使用：pointer-events: none;禁用拖动对象上的指针事件。这样你就可以获得悬停物体的事件而不是被拖动的物体。

但是你还需要适应move和mouseup事件不起作用的情况。你必须将它们绑定在别处（例如正文）

这个简短的例子并不完美，但是schuld会给你一些如何做得更好的提示;）

＆＃13;

$("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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

容器保持绿色而另一个容器没有变化的原因是您拖动的元素是第一个容器的子元素。因此，当您的鼠标位于蓝色可拖动框中时，它仍被视为左侧容器内部，因为蓝色框是第一个容器的子项。

解决这个问题的一种方法（最有可能不是最好的方法）是跟踪鼠标在屏幕上的位置（您已经在移动蓝色区块时已经做过）。在那里，如果你添加一些代码检查鼠标是否在任何其他容器的边界框内，并根据它添加/删除类。然后将根据鼠标位置添加类，而不是鼠标是否在孩子或不是孩子的元素上。

示例：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可能相当昂贵，并且在这些更复杂的情况下可能表现不佳。

Answer 3

如果你想拖动元素，我建议你使用这个JS库https://github.com/RubaXa/Sortable

有一个名为

的选项

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

在本课程中，您可以添加不同的颜色和所需的一切。

但是如果你想自己做这件事，我现在不能

拖动元素时检测悬停/鼠标悬停/鼠标中心

3 个答案: