拖动时如何改变鼠标的样式?

elwin1 2008-01-02 11:56:31

1. firefox浏览器中的弹出一个非模态窗口.
2. 拖动该非模态窗口上的一个控件(如：img)到非模态窗口外部。（我用了mousedown 和 mouseout 来模拟拖动, 因为firefox 不支持ondrag等一系列事件）
3. 在拖动的过程中，当鼠标移动到非模态窗口外部时, 我想要改变鼠标的样式，可是鼠标一直显示stop的样式，改变原控件的style.cusor也没有用，请问有没有什么办法改变鼠标样式？

...全文

1307 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiaolei1982 2008-01-04

打赏
举报

如果是这样你的要求实现起来比较麻烦，需要在点击该层时
再生成一个一样的层来拖动，放到table里仍然需要判断坐标来实现

elwin1 2008-01-04

打赏
举报

哪个cursor值改为move?

xiaolei1982 2008-01-03

打赏
举报

<script>

var   x,y,z,down=false,obj;

function   init()

{



        obj=event.srcElement;

        obj.setCapture();

        z=obj.style.zIndex;

        obj.style.zIndex=100;

        x=event.offsetX;

        y=event.offsetY;

        down=true;

		

}  

function   moveit()

{

  

        if(down&&event.srcElement==obj)

        {

                with(obj.style)

                {

                        obj.style.posLeft=document.body.scrollLeft+event.x-x;

                        obj.style.posTop=document.body.scrollTop+event.y-y;

                }

				

				if(event.x<125&&event.y<120)

				{

				obj.style.cursor="hand"

				}

				else

				{

				obj.style.cursor=""

				}



        }

		

}

function   stopdrag()

{

        down=false;

        obj.style.zIndex=z;

        obj.releaseCapture();

}

</script>

<body>



<img src="1.jpg" height="50" style="position:absolute;top:210;left:200" onmousedown="init()"   onmousemove="moveit()"   onmouseup="stopdrag()" />        



      <table   style="width:   111px;   height:   89px;index:1"   border="1"  >                

        

			    <tr>

                        <td   style="height:   85px">

                        </td>                        

                </tr>

        </table>

elwin1 2008-01-03

打赏
举报

我按2楼的方案试了一下，拖动都不行了...

tony-杨 2008-01-03

打赏
举报

你把cursor值更改为move

elwin1 2008-01-03

打赏
举报

谢谢小磊的答复，可能是我没有说清楚，导致你误解了我的意思，<img>是固定的，在把<img> 拖动过程中， <img> 不会随着鼠标移动而移动。 table就像购物车一样，而<img>像是一系列商品中的一个，把<img>拖动到table里面触发一个事件。抱歉没有说明清楚。

tantaiyizu 2008-01-02

打赏
举报

是事件不是“时间”

tantaiyizu 2008-01-02

打赏
举报

时间别直接写在 img 上，把img作为div的背景，把事件加在div上

大正他爹 2008-01-02

打赏
举报

3.style.cursor="";就可以定义鼠标的样式了。

elwin1 2008-01-02

打赏
举报

纠正一下，不是非模态对话框，而是iframe. sorry,
我写了一个简单的页面模拟了一下这个拖放的过程以便大家帮助我解决问题。

代码如下：

<!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>Untitled Page</title>
<script language="javascript" type="text/javascript">
var isMouseDown = false;
var acceptDrag = false;
function mouseDown()
{
isMouseDown = true;
acceptDrag = false;
}

function mouseOut()
{
if(isMouseDown)
{
isMouseDown = false;

//TODO: add validation for current mouse coordinate,
//if the mouse coordinate is in table, accept drag;
acceptDrag = true;
}
}

function mouseUp()
{
isMouseDown = false;
acceptDrag = false;
}

function mouseOver()
{
if(acceptDrag)
{
acceptDrag = false;
alert('drag something here..');
}

}
</script>
</head>
<body>
<img alt="" src="img/ico_equipment.gif" onmousedown = "mouseDown()" onmouseout="mouseOut()" onmouseup="mouseUp()" />
<table style="width: 111px; height: 89px;" border="1" onmouseover="mouseOver()">
<tr>
<td style="height: 85px">
</td>
</tr>
</table>

</body>
</html>