拖拽DIV到另外DIV里怎样得到目标DIV

用mouseover不拖拽时候肯定是没问题的,拖拽时候的mouseover会失灵,尤其是快速拖拽
下面上个demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/inc/js/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="/inc/js/jquery-ui.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {
            $("#mm").draggable();
            $(".abc").mouseover(function () {
                $("#qwe").html("目标: "+this.innerHTML);
            });
        });
    </script></head>
<body>
<div id="mm" style="border:1px solid red;width:400px;height:30px;line-height:30px;cursor:move;">
    123
</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">1</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">2</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">3</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">4</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">5</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">6</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">7</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">8</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">9</div>
<div class="abc" style="width:100%;height:40px;border:1px solid red;">0</div><div id="qwe" style="width:100%;height:40px;border:1px solid #000;"></div>
</body>
</html>
拖拽

解决方案 »

  1.   


    function(){
        var _t = $(this);
        alert( _t.offsetX + ":" + _t.offsetY);
    }
    这样 试试
    不过我的做法  一般是先赋值到变量里
    var div_1 = $("#aaa");
    alert( div_1.offsetX + ":" + div_2.offsetY );
    吧
      

  2.   

    暴力点的方案，把所有abc所站的区域保存下来，每次计算鼠标位置，去匹配在哪个区域里和谐点的方案，设置一个属性，叫啥名忘记了，就是拖动的时候跟着鼠标动的div与鼠标间的距离，并且关闭所有动画效果，，这样就mouseover就不会有问题了。
      

  3.   

    jqueryui有droppable插件，不过需要鼠标释放后才会触发，一定要鼠标移动的过程中判断，可以计算出所有容器的上下左右4个坐标，给document添加mousemove事件，获取鼠标坐标判断是否在容器方位内就行。<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI Droppable - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
    </style>
    <script>
        $(function () {
            $('#mm').draggable();
            $('div.abc').droppable({ drop: function (event, ui) { $("#qwe").html("目标: " + this.innerHTML); } });
        });
    </script>
    </head>
    <body>
    <div id="mm" style="border:1px solid red;width:400px;height:30px;line-height:30px;cursor:move;">
        123
    </div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">1</div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">2</div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">3</div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">4</div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">5</div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">6</div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">7</div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">8</div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">9</div>
    <div class="abc" style="width:100%;height:40px;border:1px solid red;">0</div>
     
    <div id="qwe" style="width:100%;height:40px;border:1px solid #000;"></div>
    </body>
    </html>
      

  4.   

    还是大版靠谱 其实他们就是用的droppable 我是嫌弃jQueryUI 想另辟他径