拖动幽灵元素时如何触发悬停？答案

【问题标题】：How to trigger hover when dragging ghost element over?拖动幽灵元素时如何触发悬停？
【发布时间】：2020-11-23 16:06:48
【问题描述】：

我正在使用 HTML5 拖放。当幽灵元素被拖到 div 上时，如何触发悬停事件？如果我只是将鼠标移到上面，下面的代码就可以工作，但当我拖动一个元素时就不行。

$(".droppable").on("mouseover", function (e) {
    e.stopPropagation();
    $(this).addClass('droppable-border');
}).on('mouseout', function (e) {
    $(this).removeClass('droppable-border');
});

【问题讨论】：

标签： javascript jquery drag-and-drop

【解决方案1】：

只需使用 ondragover 和 ondragleave 事件属性

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #droptarget {
            float: left; 
            width: 200px; 
            height: 35px;
            padding: 10px;
            border: 1px solid #aaaaaa;
          }
    </style>
</head>
<body>
   <p draggable="true" id="dragtarget">Drag me into the rectangle</p>

   <div id="droptarget" ondragover="this.style.backgroundColor = 'green'" ondragleave="this.style.backgroundColor = 'white'"></div>
</body>
</html>

或者你可以使用 jquery

$('#droptarget').on('dragover',function(){
  this.style.backgroundColor = 'green'
});

$('#droptarget').on('dragleave',function(){
  this.style.backgroundColor = 'white'
});

<!DOCTYPE HTML>
    <html>
    <head>
        <style>
            #droptarget {
                float: left; 
                width: 200px; 
                height: 35px;
                padding: 10px;
                border: 1px solid #aaaaaa;
              }
        </style>
    </head>
    <body>
       <p draggable="true" id="dragtarget">Drag me into the rectangle</p>

       <div id="droptarget"></div>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </body>
    </html>

【讨论】：