gamil中的任务列表 我想做个类似于gamil中的任务列表中div拖动的那种效果,谁有例子啊,只需要平级拖动就可以了,不需要子任务拖动那种效果,谢谢了。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 给你贴一个吧<html><head> <title>拖动div</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style> body { margin: 0px; padding: 0px; font - size: 12px; text - align: center; } body > div { text - align: center; margin - right: auto; margin - left: auto; }.content { width: 900px; }.content.left { float: left; width: 20 % ; /*border:1px solid #FF0000;*/ margin: 3px; }.content.center { float: left; /*border:1px solid #FF0000;*/ margin: 3px; width: 57 % }.content.right { float: right; width: 20 % ; /*border:1px solid #FF0000;*/ margin: 3px }.mo { height: auto; border: 1px solid#CCC; margin: 3px; background: #FFF }.mo h1 { background: #ECF9FF; height: 18px; padding: 3px; cursor: move; }.mo.nr { height: 80px; border: 1px solid#F3F3F3; margin: 2px } h1 { margin: 0px; padding: 0px; text - align: left; font - size: 12px }</style><script> var dragobj = {} window.onerror = function() { return false } //判断浏览器 function on_ini() { String.prototype.inc = function(s) { return this.indexOf(s) > -1 ? true: false } var agent = navigator.userAgent //取得浏览器信息 window.isOpr = agent.inc("Opera"); window.isIE = agent.inc("IE") && !isOpr; window.isMoz= agent.inc("Mozilla") && !isOpr && !isIE; if (isMoz) { Event.prototype.__defineGetter__("x", function() { return this.clientX + 2 }) Event.prototype.__defineGetter__("y", function() { return this.clientY + 2 }) } basic_ini() } function basic_ini() { window.$ = function(obj) { return typeof(obj) == "string" ? document.getElementById(obj) : obj } window.oDel = function(obj) { if ($(obj) != null) { $(obj).parentNode.removeChild($(obj)) } } } window.onload = function() { on_ini(); var o = document.getElementsByTagName("h1"); for (var i = 0; i < o.length; i++){ o[i].onmousedown = function(e) { if (dragobj.o != null) return false; e = e || event; dragobj.o = this.parentNode //上一层节点h1的div dragobj.xy = getxy(dragobj.o); dragobj.xx = new Array((e.x - dragobj.xy[1]), (e.y- dragobj.xy[0])); dragobj.o.style.width = dragobj.xy[2] + "px" //div的宽 dragobj.o.style.height = dragobj.xy[3] + "px" //div的高 dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px" //点击时移动距左边的位置 dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px" //点击时移动距顶部的位置 dragobj.o.style.position = "absolute"; dragobj.o.style.filter = 'alpha(opacity = 60)'; //拖动透明效果(IE) dragobj.o.style.opacity = '0.6' //拖动透明效果(firefox) var om = document.createElement("div") dragobj.otemp = om om.style.width = dragobj.xy[2] + "px" om.style.height = dragobj.xy[3] + "px" om.style.border = "1px dashed black"; //显示虚线边框 dragobj.o.parentNode.insertBefore(om, dragobj.o) return false } } } document.onselectstart = function() { return false } window.onfocus = function() { document.onmouseup() } window.onblur = function() { document.onmouseup() } document.onmouseup = function() { if (dragobj.o != null) { dragobj.o.style.width = "auto"; dragobj.o.style.height = "auto"; dragobj.otemp.parentNode.insertBefore(dragobj.o, dragobj.otemp); dragobj.o.style.position = ""; oDel(dragobj.otemp); dragobj={}; } } document.onmousemove=function(e) { e=e||event if(dragobj.o!=null){ dragobj.o.style.left=(e.x-dragobj.xx[0])+"px" dragobj.o.style.top=(e.y-dragobj.xx[1])+"px" createtmpl(e) } } function getxy(e) { var a=new Array() var t=e.offsetTop;//e距离上方或上层控件的位置,整型 var l=e.offsetLeft;//e距离左方或上层控件的位置,整型 var w=e.offsetWidth; var h=e.offsetHeight; while(e=e.offsetParent){//offsetParent是body因为没有相对或绝对定位 t+=e.offsetTop; l+=e.offsetLeft; } a[0]=t;a[1]=l;a[2]=w;a[3]=h return a; } function inner(o,e) { var a=getxy(o) if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){ if(e.y<(a[0]+a[3]/2)) return 1; else return 2; }else return 0; } function createtmpl(e) { var k = document.getElementsByTagName("h1") for(var i=0;i<k.length;i++){ if($("m"+i)==dragobj.o) continue var b=inner($("m"+i),e) if(b==0) continue dragobj.otemp.style.width=$("m"+i).offsetWidth //移动 1:下 2:上 if(b==1){ $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i)) }else{ if($("m"+i).nextSibling==null){ $("m"+i).parentNode.appendChild(dragobj.otemp) }else{ $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling) } } return } for(var j=0;j<3;j++){ if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV")) continue; var op=getxy($("dom"+j)) if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){ $("dom"+j).appendChild(dragobj.otemp) dragobj.otemp.style.width=(op[2]-10)+"px" } } }</script></head><body><div class=content> <div class=left id=dom0> <div class=mo id=m0><h1>dom0</h1><div class="nr"></div></div> <div class=mo id=m1><h1>dom1</h1><div class="nr"></div></div> <div class=mo id=m2><h1>dom2</h1><div class="nr"></div></div> <div class=mo id=m3><h1>dom3</h1><div class="nr"></div></div> </div> <div class=center id=dom1> <div class=mo id=m4><h1>dom4</h1><div class="nr"></div></div> <div class=mo id=m5><h1>dom5</h1><div class="nr"></div></div> <div class=mo id=m6><h1>dom6</h1><div class="nr"></div></div> <div class=mo id=m7><h1>dom7</h1><div class="nr"></div></div> </div> <div class=right id=dom2> <div class=mo id=m8><h1>dom8</h1><div class="nr"></div></div> <div class=mo id=m9><h1>dom9</h1><div class="nr"></div></div> <div class=mo id=m10><h1>dom10</h1><div class="nr"></div></div> <div class=mo id=m11><h1>dom11</h1><div class="nr"></div></div> <div class=mo id=m12><h1>dom12</h1><div class="nr"></div></div> </div></div></body></html> 我想要gmail中那种鼠标放在div前会显示一个带条纹的黑色条,拖动那个条的时候才会交换Div,可不可以啊,谢谢了 就是类似于gamil中的那种拖动效果,只有拖动那个黑色的条才可以拖动div 这个用div控制一下,判断一下你点的是哪个div然后拖动就行了 extjs中的怪问题 真正释放 ActiveXObject 内存 ActiveX控件在我的IE里为什么不能运行? ext3.0 js小问题 uploadify上传控件 取消 弹出框 ,这个能实现吗 在IE中可以改变一个元素的outerHTML,请问在netscape中应该怎么做?在线等 求删除下拉框选项的js语法。 请教怎么样让光驱通过程序自动弹出和关闭??up有分 使用layer插件,当一次页面出现两次弹出,并且后一次弹出是在第一个弹出的页面上出发的,请问如何使最后一个弹窗全屏展示? javaScript中怎么得到并使用从数据库中查询得到的数据 高手请帮忙
<html>
<head>
<title>拖动div</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body {
margin: 0px;
padding: 0px;
font - size: 12px;
text - align: center;
}
body > div {
text - align: center;
margin - right: auto;
margin - left: auto;
}.content {
width: 900px;
}.content.left {
float: left;
width: 20 % ;
/*border:1px solid
#FF0000;*/
margin: 3px;
}.content.center {
float: left;
/*border:1px solid
#FF0000;*/
margin: 3px;
width: 57 %
}.content.right {
float: right;
width: 20 % ;
/*border:1px solid #FF0000;*/
margin: 3px
}.mo {
height: auto;
border: 1px solid#CCC;
margin: 3px;
background: #FFF
}.mo h1 {
background: #ECF9FF;
height: 18px;
padding: 3px;
cursor: move;
}.mo.nr {
height: 80px;
border: 1px solid#F3F3F3;
margin: 2px
}
h1 {
margin: 0px;
padding: 0px;
text - align: left;
font - size: 12px
}
</style><script>
var dragobj = {}
window.onerror = function() {
return false
}
//判断浏览器
function on_ini() {
String.prototype.inc = function(s) {
return this.indexOf(s) > -1 ? true: false
}
var agent = navigator.userAgent //取得浏览器信息
window.isOpr = agent.inc("Opera");
window.isIE = agent.inc("IE") && !isOpr;
window.isMoz= agent.inc("Mozilla") && !isOpr && !isIE;
if (isMoz) {
Event.prototype.__defineGetter__("x",
function() {
return this.clientX + 2
})
Event.prototype.__defineGetter__("y",
function() {
return this.clientY + 2
})
}
basic_ini()
} function basic_ini() {
window.$ = function(obj) {
return typeof(obj) == "string" ? document.getElementById(obj) : obj
}
window.oDel = function(obj) {
if ($(obj) != null) {
$(obj).parentNode.removeChild($(obj))
}
}
} window.onload = function() {
on_ini();
var o = document.getElementsByTagName("h1");
for (var i = 0; i < o.length; i++){
o[i].onmousedown = function(e) {
if (dragobj.o != null) return false;
e = e || event;
dragobj.o = this.parentNode //上一层节点h1的div
dragobj.xy = getxy(dragobj.o);
dragobj.xx = new Array((e.x - dragobj.xy[1]), (e.y- dragobj.xy[0]));
dragobj.o.style.width = dragobj.xy[2] + "px" //div的宽
dragobj.o.style.height = dragobj.xy[3] + "px" //div的高
dragobj.o.style.left = (e.x - dragobj.xx[0]) + "px" //点击时移动距左边的位置
dragobj.o.style.top = (e.y - dragobj.xx[1]) + "px" //点击时移动距顶部的位置
dragobj.o.style.position = "absolute";
dragobj.o.style.filter = 'alpha(opacity = 60)'; //拖动透明效果(IE)
dragobj.o.style.opacity = '0.6' //拖动透明效果(firefox)
var om = document.createElement("div")
dragobj.otemp = om
om.style.width = dragobj.xy[2] + "px"
om.style.height = dragobj.xy[3] + "px"
om.style.border = "1px dashed black"; //显示虚线边框
dragobj.o.parentNode.insertBefore(om, dragobj.o)
return false
} }
} document.onselectstart = function() {
return false
}
window.onfocus = function() {
document.onmouseup()
}
window.onblur = function() {
document.onmouseup()
} document.onmouseup = function() {
if (dragobj.o != null) {
dragobj.o.style.width = "auto";
dragobj.o.style.height = "auto";
dragobj.otemp.parentNode.insertBefore(dragobj.o, dragobj.otemp);
dragobj.o.style.position = "";
oDel(dragobj.otemp);
dragobj={};
}
} document.onmousemove=function(e)
{
e=e||event
if(dragobj.o!=null){
dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
createtmpl(e)
}
} function getxy(e)
{
var a=new Array()
var t=e.offsetTop;//e距离上方或上层控件的位置,整型
var l=e.offsetLeft;//e距离左方或上层控件的位置,整型
var w=e.offsetWidth;
var h=e.offsetHeight;
while(e=e.offsetParent){//offsetParent是body因为没有相对或绝对定位
t+=e.offsetTop;
l+=e.offsetLeft;
}
a[0]=t;a[1]=l;a[2]=w;a[3]=h
return a;
} function inner(o,e)
{
var a=getxy(o)
if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){
if(e.y<(a[0]+a[3]/2)) return 1;
else return 2;
}else return 0;
} function createtmpl(e)
{
var k = document.getElementsByTagName("h1")
for(var i=0;i<k.length;i++){
if($("m"+i)==dragobj.o) continue
var b=inner($("m"+i),e)
if(b==0) continue
dragobj.otemp.style.width=$("m"+i).offsetWidth
//移动 1:下 2:上
if(b==1){
$("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))
}else{
if($("m"+i).nextSibling==null){
$("m"+i).parentNode.appendChild(dragobj.otemp)
}else{
$("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)
}
}
return
}
for(var j=0;j<3;j++){
if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV")) continue;
var op=getxy($("dom"+j))
if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){
$("dom"+j).appendChild(dragobj.otemp)
dragobj.otemp.style.width=(op[2]-10)+"px"
}
}
}
</script>
</head>
<body>
<div class=content>
<div class=left id=dom0>
<div class=mo id=m0><h1>dom0</h1><div class="nr"></div></div>
<div class=mo id=m1><h1>dom1</h1><div class="nr"></div></div>
<div class=mo id=m2><h1>dom2</h1><div class="nr"></div></div>
<div class=mo id=m3><h1>dom3</h1><div class="nr"></div></div>
</div>
<div class=center id=dom1>
<div class=mo id=m4><h1>dom4</h1><div class="nr"></div></div>
<div class=mo id=m5><h1>dom5</h1><div class="nr"></div></div>
<div class=mo id=m6><h1>dom6</h1><div class="nr"></div></div>
<div class=mo id=m7><h1>dom7</h1><div class="nr"></div></div>
</div>
<div class=right id=dom2>
<div class=mo id=m8><h1>dom8</h1><div class="nr"></div></div>
<div class=mo id=m9><h1>dom9</h1><div class="nr"></div></div>
<div class=mo id=m10><h1>dom10</h1><div class="nr"></div></div>
<div class=mo id=m11><h1>dom11</h1><div class="nr"></div></div>
<div class=mo id=m12><h1>dom12</h1><div class="nr"></div></div>
</div>
</div>
</body></html>