<!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=utf-8" />
<title>拖动DIV</title>
<style type="text/css">
.show{
background:#7cd2f8;
width:100%;
height:100px;
text-align:center;
left:0px;
top:0px;
z-index:10;
margin-bottom: 5px;
}
.divLeft, .divRight{
width:58%; height: 500px; float: left;
}
.divRight{
width:38%; height: 500px; float: left;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var tdiv;
var node= ".show";
var ao = null;
var draggedFlag=0; //鼠标在拖动状态,0:未初始化 1：准备阶段，2：拖动阶段
var parentDiv=null;
function SectionMousedown(e){
ao = e.srcElement;
parentDiv=ao.parentNode;
draggedFlag=1;
tdiv = document.createElement("div");
//tdiv.setAttribute("id","itemdiv");
tdiv.innerHTML = ao.outerHTML;
tdiv.style.display = "block";
tdiv.style.position = "absolute";
tdiv.style.filter = "alpha(opacity=70)";
tdiv.style.cursor = "move";
tdiv.style.zIndex = 12;
tdiv.style.width = ao.offsetWidth+"px"; //被移动table对象的高度
tdiv.style.height = ao.offsetHeight+"px";
tdiv.style.top = (getInfo(ao).top+0)+"px";
tdiv.style.left = getInfo(ao).left+"px";
document.body.appendChild(tdiv);
//鼠标按下时该鼠标所在的位置
lastX = event.clientX;
lastY = event.clientY;
//tdiv的位置
lastLeft = tdiv.style.left;
lastTop = tdiv.style.top;
//alert(lastLeft +' '+lastTop);
$(tdiv).css("cursor", "move");
try {
// tdiv.dragDrop(); //初始化拖曳事件
} catch (e) {}
//this表示原来的div
var offset = $(this).offset(); //DIV在页面的位置
var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离
var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离
//alert(x+' '+y);
$(document).bind("mousemove", function (ev) //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
{
if(tdiv!=null){
draggedFlag=2;
$(tdiv).stop(); //加上这个之后
var _x = ev.pageX - x; //获得X轴方向移动的值
var _y = ev.pageY - y; //获得Y轴方向移动的值
document.getElementById("seatX").value=ev.pageX;
document.getElementById("seatY").value=ev.pageY;
$(tdiv).animate({
left :_x + "px",
top : _y + "px"
}, 10);
}
});
}
$(document).ready(function () {
var partR=document.getElementById("partR");
var partL=document.getElementById("partL");
for(var i=0;i<partR.children.length;i++){
var sectionR=partR.children[i];
$(sectionR).mousedown(SectionMousedown);
}
for(var i=0;i<partL.children.length;i++){
var sectionL=partL.children[i];
$(sectionL).mousedown(SectionMousedown);
}
$(document).mouseup(function (e) {
//如果当前div位置小于0，将该div置于位置0处
var offset = $(node).offset(); //DIV在页面的位置
var x = offset.left; //获得鼠标指针离DIV元素左边界的距离
var y = offset.top; //获得鼠标指针离DIV元素上边界的距离
if(draggedFlag==0){ //未初始化阶段，放下鼠标
}else if(draggedFlag==1){ //准备阶段，放下鼠标
tdiv.style.cursor = "default";
draggedFlag=0;
document.body.removeChild(tdiv);
tdiv=null;
}else if(draggedFlag==2){ //拖动阶段，放下鼠标
draggedFlag=0;
tdiv.style.cursor = "default";
$(tdiv).css("cursor", "default"); //鼠标指针变回原来默认形状
//取得tdiv中的子结点
var tchild=tdiv.children[0];
$(document).unbind("mousemove");//解除绑定鼠标移动事件
//鼠标松开时的位置
var _x=e.pageX;
var _y=e.pageY;
var st_t=tdiv.children[0];
$(st_t).mousedown(SectionMousedown);
//松开鼠标时鼠标在左边，右边加上该结点
if(mouseOnLeft(_x,_y)){
partL.appendChild(st_t);
parentDiv.removeChild(ao);
}else
//松开鼠标时在鼠标位置在右边，右边加上该结点
if(mouseOnRight(_x,_y)){
partR.appendChild(st_t);
parentDiv.removeChild(ao);
}else{//松开鼠标时鼠标在其他位置,
}
document.body.removeChild(tdiv);
tdiv=null;
ao = null;
st_t=null;
parentDiv=null;
//nodeAnimate(x,y);
}
});
})
function nodeAnimate(x,y){
if(x<0) x=0;
if(y<0) y=0;
$(node).animate({
left : x + "px",
top : y + "px"
}, 1001);
}
//返回true/false。判断鼠标在右边
function mouseOnRight(x,y){
//鼠标松开时的位置
//var x=e.pageX;
//var y=e.pageY;
//右边框子的大小位置
var partR=document.getElementById("partR");
var divx1 = partR.offsetLeft;
var divy1 = partR.offsetTop;
var divx2 = partR.offsetLeft + partR.offsetWidth;
var divy2 = partR.offsetTop + partR.offsetHeight;
//alert(divx1+' '+divy1+' '+divx2+' '+divy2+' ');
document.getElementById("seatZ").value=divx1+' '+divy1+' '+divx2+' '+divy2+' ';
//if( x <= divx2 && x >= divx1 && y <= divy2 && y >= divy1){
if( x >= divx1 ){
return true;
}else
return false;
}
//返回true/false 判断鼠标在左边
function mouseOnLeft(x,y){
//鼠标松开时的位置
//var x=e.pageX;
//var y=e.pageY;
//右边框子的大小位置
var partL=document.getElementById("partL");
var divx1 = partL.offsetLeft;
var divy1 = partL.offsetTop;
var divx2 = partL.offsetLeft + partL.offsetWidth;
var divy2 = partL.offsetTop + partL.offsetHeight;
//alert(divx1+' '+divy1+' '+divx2+' '+divy2+' ');
if(x < divx2){
return true;
}else
return false;
}
function getInfo(o) { //取得对象的绝对坐标
var to = new Object();
to.left = to.right = to.top = to.bottom = 0;
var twidth = o.offsetWidth;
var theight = o.offsetHeight;
while (o != document.body) {
to.left += o.offsetLeft;
to.top += o.offsetTop;
o = o.offsetParent;
}
to.right = to.left + twidth;
to.bottom = to.top + theight;
return to;
}
</script>
</head>
<body>
<input type = "button" οnclick="aaa();" value="Click Me" />
<input type = "text" id="seatX" />
<input type = "text=" id="seatY" />
<input type = "text=" id="seatZ" />
<br /><br />
<div style="width:100%; height: 500px; border-color: #FF0000; border: 5px;" >
<!--jquery实现DIV层拖-->
<div id="partL" class="divLeft" >
<div id="st1" class="show">
jquery实现DIV层拖动1
</div>
<div id="st2" class="show">
jquery实现DIV层拖动 2
</div>
<div id="st3" class="show">
jquery实现DIV层拖动3
</div>
<div id="st4" class="show">
jquery实现DIV层拖动 4
</div>
</div>
<div style="width:1%; height: 500px; float: left; border-right-color: #00FF33; background-color: #00FF00;"></div>
<div id="partR" class="divRight" >
<div id="st5" class="show">
jquery实现DIV层拖动 5
</div>
</div>
</div>
</div>
<!--jquery实现DIV层拖-->
</body>
<script type="text/javascript">
function aaa() {
alert(getOs())
}
function getOs()
{
var OsObject = "";
if(!!window.ActiveXObject || "ActiveXObject" in window) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(isChrome=navigator.userAgent.indexOf("Chrome")>0) {
return "Chrome";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
}
</script>
</html>
用文件保存该代码即可执行，需要引入jquery.js文件，花了我两天时间才做成，不过还有待改进。
可以兼容IE9到IE11，谷歌浏览器，火狐暂时不兼容，页面底下包括浏览器判断，，读者可以依此去想办法兼容其他浏览器
4850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
