2 zzzcsd zzzcsd 于 2016.04.06 09:42 提问

Javascript如何做一个拖动效果

1.拖动用哪个事件?dragstart还是mousemove?
2.修改div的哪个样式?top还是translate?

这两种方案,各有什么优劣,各用在什么场合比较好?

3个回答

showbo
showbo   Ds   Rxr 2016.04.06 09:57

translate有兼容性,肯定是top/left了
同理dragstart也一样

CSDNXIAON
CSDNXIAON   2016.04.06 17:02

如何做一个好梦
高管 如何做一个讲师
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

Dove88888888
Dove88888888   2016.04.08 20:21

前几天刚写了一个,时间是用mouseup,mousedown,mousemove;修改div的top和left;
具体是用一个变量来保存你鼠标焦点的x坐标与拖动的块的left值的差值,这样你的mousemove事件就可以用新的焦点x坐标减去这个差值,得到移动中的块
的left值,就会不断的改变这个left值,就可以移动了,当你mouseup后,再锁定这个left就可以了。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
JavaScript 实现简单的拖拽效果
之前一直对js中常用坐标属性不是很熟,特意花了一个下午的时间研究,并写了一个实现元素拖动的函数,在这边分享一下。(如果有不对的地方,还请批评指正~) 先介绍一下实现元素拖动需要的坐标属性。offsetLeft、offsetTop 和 clientX、clientY offsetLeft \ offsetTop 用在dom节点中,可以返回当前元素距离某个父辈元素左边缘的距离
js面板拖拽效果
步骤: 1.在指定可拖动区域中按下; 2.在页面中移动; 3.释放图标时停止移动; 事件onmousedown:在用户按下任何鼠标按钮时触发。 光标的位置可用event的属性clientX和clientY来获得,他们的值表示事件发生时鼠标指针在视口中的水平坐标和垂直坐标。不包括页面滚动的距离。 时间onmousemove:当鼠标指针在元素内部移动时重复的触发。 伪代码: /
JavaScript怎么做拖拽轨迹的回放
*{ margin:0px; padding:0px; } #box{ position:absolute; left:300px; top:100px; width:300px; height:200px; border:1px solid black; } #title{ width:300px; height:30px; background-c
JavaScript实现网页元素的拖拽效果
JavaScript实现网页元素的拖拽效果
JS+DIV 实现拖动效果
效果图 思路 代码 优化封装以及解决拖动问题事件捕获效果图思路代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="main" style="background-color: aqua;width: 100px;hei
JavaScript实现div拖拽吸附效果
JavaScript学习记录利用JavaScript实现拖拽吸附效果<!doctype html> <html> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> #div1 { width: 100px; height: 100px; background: red; position: absolute
js实现鼠标拖拽效果
在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动;那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了;首当其冲的,要涉及到鼠标的三个事件,分别为鼠标按下、移动、松开;在这三个事件里分别计算元素鼠标的位置即可; /*******拖拽原理1                 拖拽状态 = 0
JavaScript图片拖动效果
JavaScript图片拖动效果,纯粹的JS图片拖动效果!!
好友js拖动分组
js好友拖动分组
js实现窗口拖拽效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 300px; background-color: green; position: absolute; } h2{ width:100% } </style> </