网站制作学习网JS脚本→正文:javascript使所有html元素都有拖拽事件
字体:

javascript使所有html元素都有拖拽事件

JS脚本 2010/5/3 15:29:30  点击:不统计


在上一节中学历了javascript中的拖拽事件,有一部分元素没有拖拽事件,我们通过本节的dragDrop()来初始化系统拖拽事件,让一般情况下不能拖拽的元素有dragStart,drag,dragend事件。
查看效果:javascript使所有html元素都有拖拽事件
javascript使所有html元素都有拖拽事件,关键在于dragDrop()时机,最好用onmouseover事件处理初始化拖动.
比如:oforasp.onmouseover = function(oEvent)//oforasp是元素对象,oEvent是window的event属性
{
if(oEvent.button==1){oforasp.dragDrop();}//oEvent.button==1是指点击左键时//<网站制作学习网Foasp.cn>
}
这样在元素对象上面点击左键时,触发dragDrop(),初始化拖动事件。
下一步是通过ondragstart事件处理dataTransfer对象来确定被拖动项的动作。
比如:
<html>
<head>
<title>网站制作学习网</title>
<script language="javascript">
var forasp = new Object;
forasp.cn_mousemove = function(oEvent)
{
if(oEvent.button==1)
 {
 oEvent.srcElement.dragDrop();
}
}
forasp.cn_drag = function(oEvent)
{
oEvent.dataTransfer.setData("text","网站制作学习网欢迎您!");
}
</script>
</head>
<body>
<p>拖动下面的层(不是文字)到text里面,看看有什么内容</p><网站制作学习网Foasp.cn>
<p><div id="aaa" style="height:200px;width:200px;background-color:green;" onmousemove="forasp.cn_mousemove(event);" ondragstart="forasp.cn_drag(event);">
拖动这里的层试试。
</div>
</p>
<p><input type="text" size = "25" ></p>
</body>
</html>
拖动div到text文本框,在文本框内则显示"网站制作学习网欢迎您!"
原文章%77w%77%2Ef%6F%72%61%73%70%2E%63n

·上一篇:javascript拖放事件中的数据传送 >>    ·下一篇:javascript错误和异常 >>
推荐文章
最新文章