Javascript Drag & Drop

最新推荐文章于 2022-11-15 11:01:49 发布

lin412021

最新推荐文章于 2022-11-15 11:01:49 发布

阅读量108

点赞数

文章标签： JavaScript XHTML ViewUI

本文链接：https://blog.csdn.net/lin412021/article/details/83943488

版权

<!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">
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
};
}
</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>