Как вызвать наведение при перетаскивании призрачного элемента? - PullRequest
Новая
       17

Как вызвать наведение при перетаскивании призрачного элемента?

0 голосов
/ 03 августа 2020

Я использую HTML5 перетаскивание. Как заставить срабатывать событие зависания, когда призрачный элемент перетаскивается по div? Приведенный ниже код работает, если я просто наведу указатель мыши, но не при перетаскивании элемента. 

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

1 Ответ

1 голос
/ 03 августа 2020

Просто используйте атрибуты событий 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>
...