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

Question

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

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

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

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

How to trigger hover when dragging ghost element over?

javascript

jquery

drag-and-drop

只需使用 ondragover 和 ondragleave 事件属性

或者您可以使用jquery