Javascript 如何在鼠标悬停事件中使用鼠标悬停

我正在尝试使用

jqueryui

或HTML5拖放功能为我的网站创建一个拖放功能。我已找到了拖动部分，但我无法在特定的放置区域放置它们。这是我的密码：

HTML

<ul id="grid">
     <li class="drop">
          <div class="drag" id="el_1"><div>
     </li>
     <li class="drop">
          <div class="drag" id="el_2"><div>
     </li>
     <li class="drop">
          <div class="drag" id="el_3"><div>
     </li>
     <li class="drop"></li>
     <li class="drop"></li>
     <li class="drop"></li>
</ul>
<script>
     $(function() {
          $('.handle').mousedown(drag_and_drop);
     });
</script>

脚本

function drag_and_drop(e){
        var drag = $(this);
        var drop = drag.parent();

        drag.addClass('draggable');

        drag_h = drag.outerHeight(),
        drag_w = drag.outerWidth(),
        pos_y = drag.offset().top + drag_h - e.pageY,
        pos_x = drag.offset().left + drag_w - e.pageX;

        $('.draggable').css('z-index', 9000).mousemove(function(e) {

/*

IN THIS MOUSEMOVE FUNCTION IS THERE ANY WAY TO DETECT IF THE DRAGGABLE DIV IS "HOVERING" OVER THE li.drop ELEMENTS?

*/

            $('.draggable').offset({
                top: e.pageY + pos_y - drag_h,
                left: e.pageX + pos_x - drag_w

            }); 
        }).mouseup(function() {
            drag.removeClass('draggable');
        });   
    e.preventDefault(); // stops the browser default drag method    
};

---

一旦我开始拖动一个对象，有没有什么方法可以检测它是否在一个特定的li.drop上？我可以从这个li.drop上把它放进去？

你可以使用下面的方法来获取当前鼠标位置，并编写另一个函数来查看该位置是否在一个可拖放的divs范围内。好文章在这里：

---

我还应该注意，一旦发生删除，我将移动到coorisponding

中，并将更改保存到数据库中，但这超出了我的问题范围。万一你想知道为什么我的html是这样设置的，你真的不应该在mousemove处理程序中分配mouseup处理程序。你会像没人管的事一样吞噬内存。Shmidty-谢谢，我删除了那段代码你还将附加的

mousemove

和

mouseup

处理程序绑定到

.draggable

每次

mousedown

a

.handle

。您可能应该将

$（this）.off（“mousemove mouseup”）

放在

mouseup

处理程序中，或者将代码更改为仅绑定这些处理程序一次。

function drag_and_drop(e){
        var drag = $(this);
        var drop = drag.parent();

        drag.addClass('draggable');

        drag_h = drag.outerHeight(),
        drag_w = drag.outerWidth(),
        pos_y = drag.offset().top + drag_h - e.pageY,
        pos_x = drag.offset().left + drag_w - e.pageX;

        $('.draggable').css('z-index', 9000).mousemove(function(e) {

/*

IN THIS MOUSEMOVE FUNCTION IS THERE ANY WAY TO DETECT IF THE DRAGGABLE DIV IS "HOVERING" OVER THE li.drop ELEMENTS?

*/

            $('.draggable').offset({
                top: e.pageY + pos_y - drag_h,
                left: e.pageX + pos_x - drag_w

            }); 
        }).mouseup(function() {
            drag.removeClass('draggable');
        });   
    e.preventDefault(); // stops the browser default drag method    
};