我想实现拖动div的效果,获取相邻的显示数据div中id的,结果javascript报错null为空或不是对象。
showId(did)是获取id的函数,它在单独执行时是没有错误的<!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>无标题文档</title>
<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: 400px;
}
.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 h3 {
background: #ECF9FF;
height: 18px;
padding: 3px;
cursor: move;
}
.mo.nr {
height: 18px;
border: 1px solid#F3F3F3;
margin: 2px;
width: 200px
}
h1 {
margin: 0px;
padding: 0px;
text - align: left;
font - size: 12px
}
h3 {
margin: 0px;
padding: 0px;
text - align: left;
font - size: 10px
}
.xcv {
background:#FFFF66;
margin: 0px;
padding: 3px;
text - align: left;
font - size: 10px;
cursor:move
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
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("h3");
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 //上一层节点h3的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("h3")
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"
//}
//}
}function onfocusStyle(did)
{
var did=document.getElementById(did);
did.className="xcv";
}function onblurStyle(did)
{
document.getElementById(did).className="nr";
}
function showId(did)
{
var myparentid=document.getElementById(did).parentNode.id;

var xiaparent=document.getElementById(myparentid).nextSibling;
var shangparent=document.getElementById(myparentid).previousSibling;
if(shangparent!=null)
{
var shangparentid=shangparent.id;
var shangid="";
$("#"+shangparentid).children("div").each(function(){
  shangid+=this.id;
});
alert("上:"+shangid);
}
if(xiaparent!=null)
{
var xiaparentid=xiaparent.id;
var xiaid="";
$("#"+xiaparentid).children("div").each(function(){
xiaid+=this.id;
});
alert("下:"+xiaid);
}
}
</script>
</head><body>
<div class=content>
<div class=mo id="m0"><h3>dom0</h3><div class="nr" contenteditable="true" id="m00" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务0000-m00</div></div>
<div class=mo id="m1"><h3>dom1</h3><div class="nr" contenteditable="true" id="m1120" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务1111-m1120</div></div>
<div class=mo id="m2"><h3>dom2</h3><div class="nr" contenteditable="true" id="m20" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务2222-m20</div></div>
<div class=mo id="m3"><h3>dom3</h3><div class="nr" contenteditable="true" id="m30" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务3333-m30</div></div>
<div class=mo id="m4"><h3>dom4</h3><div class="nr" contenteditable="true" id="m40" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务4444-m40</div></div>
<div class=mo id="m5"><h3>dom5</h3><div class="nr" contenteditable="true" id="m50" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务5555-m50</div></div>
<div class=mo id="m6"><h3>dom6</h3><div class="nr" contenteditable="true" id="m60" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务6666-m60</div></div>
<div class=mo id="m7"><h3>dom7</h3><div class="nr" contenteditable="true" id="m70" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务7777-m70</div></div>
<div class=mo id="m8"><h3>dom8</h3><div class="nr" contenteditable="true" id="m80" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务8888-m80</div></div>
<div class=mo id="m9"><h3>dom9</h3><div class="nr" contenteditable="true" id="m90" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务9999-m90</div></div>
<div class=mo id="m10"><h3>dom10</h3><div class="nr" contenteditable="true" id="m100" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务1010-m100</div></div>
<div class=mo id="m11"><h3>dom11</h3><div class="nr" contenteditable="true" id="m110" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务1111-m110</div></div>
<div class=mo id="m12"><h3>dom12</h3><div class="nr" contenteditable="true" id="m120" onclick="showId(this.id)" onblur="onblurStyle(this.id)">今天的任务1212-m120</div></div>
</div>
</body>
</html>