Submitted by koyoz on 2008, June 8, 10:49 PM. javascript
js拖拽和放置效果.
这个drag-drop.html
XML/HTML代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>js drag + drop koyoz</title>
- <style type="text/css">
- * {margin:0px;padding:0px;font-size:12px;}
- #drop{position:absolute;width:200px;height:300px;border:1px #A5B6C8 solid;background:#EEF3F7;left:400px;top:100px;padding:10px;}
- .item {width:100px; height:28px;background:#C2ECA7;text-align:center;line-height:28px;cursor:pointer;margin-top:5px;}
- #items {margin: 50px 0 0 100px;}
- </style>
- </head>
- <body>
- <div id="drop">拖过来试试</div>
- <div id="items">
- <div id="item1" class="item">11111</div>
- <div id="item2" class="item">22222</div>
- <div id="item3" class="item">33333</div>
- <div id="item4" class="item">44444</div>
- <div id="item5" class="item">55555</div>
- <div id="item6" class="item">66666</div>
- </div>
- <script type="text/javascript" src="drag-drop.js"></script>
- <script type="text/javascript">
- //逐个注册drag事件
- var itemx = document.getElementById('items').getElementsByTagName("div")
- for(var i = 0; l = itemx.length, i < l; i++)
- {
- makeDrag(itemx[i]);
- }
- //注册放置对象
- var dropItem = document.getElementById('drop');
- makeDrop(dropItem);
- </script>
- </body>
- </html>
这是drag-drop.js
JavaScript代码
- var makeDrag_flag = false;
- var makeDrop_objs = [];
- //注册放置对象
- function makeDrop(obj)
- {
- makeDrop_objs.push(obj);
- }
- //注册拖动对象
- function makeDrag(obj)
- {
- obj.onmousedown = function (e)
- {
- if (!document.all) e.preventDefault();
- var oPos = getObjPos(obj);
- var cPos = getCurPos(e);
- makeDrag_flag = true;
- document.onmouseup = function (e){
- makeDrag_flag = false;
- document.onmousemove = null;
- document.onmouseup = null;
- //放置位置检查开始
- var nPos = getCurPos(e);
- for(i = 0; i < makeDrop_objs.length; i++)
- {
- var tg = makeDrop_objs[i];
- var tPos = getObjPos(tg);
- var tg_w = tg.offsetWidth;
- var tg_h = tg.offsetHeight;
- if ((nPos.x > tPos.x) && (nPos.y > tPos.y) && (nPos.x < tPos.x + tg_w) && (nPos.y < tPos.y + tg_h))
- {
- tg.innerHTML += '<p>' + obj.innerHTML + '拖入</p>'
- obj.style.display = 'none';
- }
- }
- //放置位置检查结束
- };
- document.onmousemove = function (e)
- {
- if (makeDrag_flag)
- {
- obj.style.position = 'absolute';
- var Pos = getCurPos(e);
- obj.style.left = Pos.x - cPos.x + oPos.x + 'px';
- obj.style.top = Pos.y - cPos.y + oPos.y + 'px';
- }
- return false;
- }
- }
- }
- function getObjPos(obj)
- {
- var x = y = 0;
- if (obj.getBoundingClientRect)
- {
- var box = obj.getBoundingClientRect();
- var D = document.documentElement;
- x = box.left + Math.max(D.scrollLeft, document.body.scrollLeft) - D.clientLeft;
- y = box.top + Math.max(D.scrollTop, document.body.scrollTop) - D.clientTop;
- }
- else
- {
- for(; obj != document.body; x += obj.offsetLeft, y += obj.offsetTop, obj = obj.offsetParent );
- }
- return {'x':x, 'y':y};
- }
- function getCurPos(e)
- {
- e = e || window.event;
- var D = document.documentElement;
- if (e.pageX) return {x: e.pageX, y: e.pageY};
- return {
- x: e.clientX + D.scrollLeft - D.clientLeft,
- y: e.clientY + D.scrollTop - D.clientTop
- };
- }