js动态添加div并实现鼠标拖动

js动态添加div并实现鼠标拖动,第1张

newDiv=createElement("div")//动态创建DIV

newDIV.width=600px

....//这里是div的属性定义

......

document.getElementsByTagName("body").appendChild(newDiv)//添加到body里

..

div的拖动通过绑定onmousedown 和onmousemove 和 onmouseup 事件,获取鼠标当前坐标,经过计算后设置DIV的posision就可以了

释放??jquery ui有禁用功能

$(selector).draggable("disable")// 禁止其拖动功能

$(selector).draggable("enable") // 激活其拖动功能

$(selector).draggable("destory") // 完全删除拖动功能

<div id="c" onmousedown="mm(event)">123123</div>

evt参数是就是上面的event对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

因为火狐不支持直接获取event对象.因此FF在触发拖拽事件前需要明确传递event.

IE则不需要.所以才出现 e = evt || event主要是兼容所用.

e.clientX是获取当前鼠标的横坐标.


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11632383.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存