怎么用 javascript 实现拖拽

答案:2 悬赏:50 手机版

解决时间 2021-11-19 14:40

提问者网友：箛茗
2021-11-19 07:47

怎么用 javascript 实现拖拽

最佳答案

五星知识达人网友：你可爱的野爹
2021-11-19 08:45

javascript 实现拖拽实现原理。如下：
　　用JavaScript事件方法表示就是：
　　① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()

1.首先调用js文件，如下：
2.然后使用startDrag()方法绑定拖拽效果，startDrag()方法有两个参数，第一个是点击的对象（即点击那里可以实现拖拽，例如弹出层的标题栏），第二个是拖拽的对象（例如一个弹出层）。也就是startDrag(触发拖拽对象，被拖拽对象)。

#box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
#main{border:1px solid #a0b3d6; background:white;}
#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
#content{width:420px; height:250px; padding:10px 5px;}


       拖拽

           内容……


JS部分

全部回答

1楼网友：鸠书
2021-11-19 10:02

在DOM上绑定事件一共三个
onmousedown
onmousemove
onmouseup

DOM.on({
onmousedown:function(e){},
onmousemove:function(){},
onmouseup:function(){e},
})

然后再在里面写样式写功能
onmousedown:function(){} //这边主要是记录 target 的属性

onmousemove:function(){} // 这边主要是写 DOM跟随

onmouseup:function(){} // 这里主要是写鼠标放开时候重新记录 DOM的位置

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息