Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function dragFunc(id) {
var Drag = document.getElementById(id);
Drag.onmousedown = function(event) {
var ev = event || window.event;
event.stopPropagation();
var disX = ev.clientX - Drag.offsetLeft;
var disY = ev.clientY - Drag.offsetTop;
document.onmousemove = function(event) {
var ev = event || window.event;
Drag.style.left = ev.clientX - disX + "px";
Drag.style.top = ev.clientY - disY + "px";
Drag.style.cursor = "move";
};
};
Drag.onmouseup = function() {
document.onmousemove = null;
this.style.cursor = "default";
};
};
dragFunc("idOuterDiv");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

让div在body中可以任意拖动

JavaScript原生实现div的拖动!以后会陆续更新,在div内部,用jquery实现其 拖动!

2
      总督sir0
      2017/9/7 22:48:04

      可以改进一下代码做成一个插件

      回复
      一抹浅笑?诠释所有的悲伤0
      2017/9/6 10:12:11