对拖拽的高级应用，实现带框拖拽

来源：互联网发布：北大青鸟编程v5 编辑：程序博客网时间：2024/06/14 05:41

本文将对我上篇JavaScript拖拽进行添加特效，实现类似windows7系统那样带框的拖拽。如果有疑问的话先看我上一篇文章JavaScript实现拖拽。本文主要细讲如下实现这特效的细节。

在JavaScript中我们要实现一个带框的拖拽的话，其实这个框本身也是一个div元素，而这个div元素是我们动态生成的。要想让这个框会动，首先我们对它的定位动手，在css中新设一个id，让position设为absolute。然后我们就在js中创造这个div元素，当鼠标进行点击的时候，这个通过document.createElement('div')来生成一个div元素，并且利用setAttribute或者直接用id给它赋予css样式。这个div框的长宽肯定要等于被点击对象的长宽，所以width和height要等于offsetWidth和offsetHeight，为了不让点击的时候div框突然间跑到页面左上角，我们要对它的top和left进行设置，让它的top和left等于被点击对象的offsetTop和offsetLeft，之后就appendChild加入到body中。

当鼠标移动的时候，div框的left和top等于鼠标移动的坐标减去相对于距离被点击对象左边和右边的距离，当鼠标点击释放的时候，div框的left和top的值赋予给被点击对象的left和top，最后一定要用removeChild将div框给删除，如果不删除的话则会在页面中每次拖拽都会形成一个div框。下面代码展示：

<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><style type="text/css">#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;}#hideDiv{position: absolute;border: 1px dashed black;}</style></head><body><div id = "box">    <div id = "main">        <div id = "bar">拖拽</div>        <div id = "content">内容……</div>    </div></div></body><script type="text/javascript">var div = document.getElementById('bar')var parentDiv = div.parentNode.parentNodediv.onmousedown = function(ev) {var hideDiv = document.createElement('div')// hideDiv.setAttribute('id', 'hideDiv')hideDiv.id = 'hideDiv'hideDiv.style.width = parentDiv.offsetWidth - 2 + 'px'hideDiv.style.height = parentDiv.offsetHeight - 2 + 'px'hideDiv.style.top = parentDiv.offsetTop + 'px'hideDiv.style.left = parentDiv.offsetLeft + 'px'document.body.appendChild(hideDiv)var oevent = ev || eventvar disX = oevent.clientX - parentDiv.offsetLeftvar disY = oevent.clientY - parentDiv.offsetTopif (div.setCapture) {div.onmousemove = moveAreadiv.onmouseup = moveUpdiv.setCapture()} else {document.onmousemove = moveAreadocument.onmouseup = moveUp}function moveArea(ev) {var oEvent = ev || eventvar l = oEvent.clientX - disXvar t = oEvent.clientY - disY// 不会超出可视区if(l < 0) {l = 0}else if (l > document.documentElement.clientWidth - parentDiv.offsetWidth) {l = document.documentElement.clientWidth - parentDiv.offsetWidth};if(t < 0) {t = 0}else if (t > document.documentElement.clientHeight - parentDiv.offsetHeight) {t = document.documentElement.clientHeight - parentDiv.offsetHeight};hideDiv.style.left = l + 'px'hideDiv.style.top = t + 'px'}function moveUp() {this.onmousemove = nullthis.onmouseup = nullif (div.releaseCapture) {div.releaseCapture()};parentDiv.style.left = hideDiv.offsetLeft + 'px'parentDiv.style.top = hideDiv.offsetTop + 'px'document.body.removeChild(hideDiv)}return false}</script></html>

阅读全文

0 0