js鼠标移动问题

belldandysai 2010-02-01 06:33:38

我现在的情况是，鼠标可以拖拽div,
我希望在鼠标拖div的过程中，经过一个指定table的某个td时，能改变td的颜色
onmouseover触发不了，因为拖着一个控件
谢谢。

...全文

145 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

gnahshining 2010-02-02

打赏
举报

根据td的坐标吧。。
帮顶

belldandysai 2010-02-02

打赏
举报

征求更多意见，自己顶

yingzhilian2008 2010-02-02

打赏
举报

onmouseover 具体什么时候判断就不知道了等待高手

happy664618843 2010-02-02

打赏
举报

onmouseup onmousemove

shan1119 2010-02-02

打赏
举报

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sample</title>

<style type="text/css">

    body div {background:#ABE;width:70px;position:absolute;filter:alpha(style=0,opacity=50)}

    table {background:#DDD;border:1px;}

    table tr td {width:70px;border:1px;}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        var obj;

        var selIndex=-1;

        var l=0;t=0;

        

        $("div").mousedown(function(e){

            obj=this;

            sx=e.pageX+document.body.scrollLeft;

            sy=e.pageY+document.body.scrollTop;

        });

        $("div").mouseup(function(e){

            obj=null;

        });

        $("div").mousemove(function(e){

            if(obj){

                ex=e.pageX+document.body.scrollLeft;

                ey=e.pageY+document.body.scrollTop

                l=(ex-sx+$(this).offset().left);

                t=(ey-sy+$(this).offset().top );

                

                $(this).css("left",l+"px");

                $(this).css("top" ,t+"px");

                sx=ex;sy=ey;

                

                $("td").css("background","#DDD");

                $("td").each(function(){

                    if($(this).offset().left<=l

                    && $(this).offset().top <=t){

                        selIndex=$("td").index(this);

                    }

                });

                $("td:eq("+selIndex+")").css("background","#FFF");

                

            }

        });

    });

</script>

</head>

<body><div></div>

<table>

   <tr><td>1</td><td>11</td></tr>

   <tr><td>2</td><td>22</td></tr>

   <tr><td>3</td><td>33</td></tr>

   <tr><td>4</td><td>44</td></tr>

</table>

</body>

</html>