html代碼

<div id="box"></div>

css代碼

* {margin: 0;padding: 0;}#box {width: 100px;height: 100px;background: red;position: absolute;}

JS代碼

var Box = document.getElementById("box");var iw = document.documentElement.clientWidth - Box.offsetWidth;Box.onmousedown = function (e) {var e = e || event;var disX = e.offsetX;var disY = e.offsetY;document.onmousemove = function (e) {var e = e || event;var l = e.clientX - disX;var t = e.clientY - disY;l = l >= iw ? l = iw : (l <= 0 ? l = 0 : l = l);t = t >= e.clientY ? t = e.clientY : (t <= 0 ? t = 0 : t = t);Box.style.left = l + "px";Box.style.top = t + "px";};document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;}}

總結

以上是生活随笔為你收集整理的弹出对话框拖拽JavaScript实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。