树功能-可拖拽树叉\树页到目标节点后.

呵.那个好改..但是懒的弄.. ^o^
加了三种选择..
但是结构有点乱了...感觉上没有原先清晰了..哎..
因为当时做的时候就没考虑到要做变色,要做缩进...,要做选择...
真是罪过..
<html>
<head>
<style type="text/css">
#wc div {
cursor:default;
}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}function Drag() {
var obj, ox, oy, nx, ny;

function startDrag(e) {
//当按下时初始化参数
var e = window.event || e;
var dx = document.body.scrollLeft, dy = document.body.scrollTop;
obj = this.root;
obj.style.left = dx + e.clientX - (ox = dx + e.clientX - obj.offsetLeft);
obj.style.top = dy + e.clientY - (oy = dy + e.clientY - obj.offsetTop);
obj.style.position = "absolute";
document.onmousemove = moveDrag;
document.onmouseup = stopDrag;
}

function moveDrag(e) {
//鼠标移动时改变obj的位置
var e = window.event || e;
var overNode;
nx = document.body.scrollLeft + e.clientX, ny = document.body.scrollTop + e.clientY;
obj.style.left = nx - ox + "px";
obj.style.top = ny - oy + "px";
//当移动的时候。。判断是否在所有的节点上方法如下
//start
overNode = sp(obj);
if (overNode != null) {
if (obj.isin != overNode) {
$("status").innerHTML = "在 " + overNode.id + " 的后面";
if (obj.isin != null)
color(obj.isin);
color(overNode, 1);
obj.isin = overNode;
}
} else {
if (obj.isin != null) {
$("status").innerHTML = "从 " + obj.isin.id + " 后移开";
color(obj.isin);
obj.isin = overNode;
}
}
//end
}

function stopDrag() {
//当松开时清除onmousemove方法
var status;
if (obj.isin != null) {
color(obj.isin);
status = prompt("请输入节点存放的位置：如[down|up|in]", "down");
if (status == "down") {
if (obj.isin == obj.isin.parentNode.childNodes[0] && obj.isin.root.nbsp)
obj.isin = obj.isin.root;
var nextNode = getNextNode(obj.isin);
if (nextNode != null)
obj.isin.parentNode.insertBefore(obj, nextNode);
else
obj.isin.parentNode.appendChild(obj);
upNbsp();
} else if (status == "up") {
obj.isin.parentNode.insertBefore(obj, obj.isin);
upNbsp();
} else if (status == "in") {
var div = document.createElement("div");
obj.isin.parentNode.insertBefore(div, obj.isin);
div.appendChild(obj.isin);
div.appendChild(obj);
obj.isin.root = div;
upNbsp(1);
}
}
obj.style.position = "static";
document.onmousemove = document.onmouseup = null;
}

function isin(o) {
if (nx > o.offsetLeft && nx < o.offsetLeft + o.offsetWidth &&
ny > o.offsetTop && ny < o.offsetTop + o.offsetHeight) return true;
else return false;
}

function sp(o) {
var p = o.parentNode, cs, i;
if (!p || p == document.body) return null;
cs = p.childNodes;
for (i = 0 ; i < cs.length ; i ++) {
if (cs[i].nodeType != 1 || cs[i] == o) continue;
if (isin(cs[i])) {
if (cs[i].childNodes.length == 1) {
return cs[i];
} else {
return sc(cs[i]);
}
}
}
return sp(p);
}

function sc(o) {
var cs = o.childNodes, i;
for (i = 0 ; i < cs.length ; i ++) {
if (cs[i].nodeType != 1) continue;
if (isin(cs[i])) {
if (cs[i].childNodes.length == 1)
return cs[i];
else
return sc(cs[i]);
}
}
return null;
}

function getNextNode(node) {
var nextNode = node.nextSibling;
if (nextNode) {
if (nextNode.nodeType == 1)
return nextNode;
else
return getNextNode(nextNode);
} else return null;
}

function upNbsp(i) {
if (!i) i = 0;
if (obj.childNodes.length == 1) {
obj.nbsp = obj.isin.nbsp + i;
obj.innerHTML = createNbsp(obj);
} else {
updateNbsp(obj, (obj.childNodes[0].nodeType == 1 ? obj.childNodes[0] : obj.childNodes[1]).nbsp, obj.isin.nbsp + i);
}
}

function updateNbsp(o, on, nn) {
var cs = o.childNodes;
for (var i = 0 ; i < cs.length ; i ++) {
if (cs[i].nodeType != 1) continue;
if (cs[i].childNodes.length == 1) {
cs[i].nbsp = cs[i].nbsp + nn - on;
cs[i].innerHTML = createNbsp(cs[i]);
} else {
updateNbsp(cs[i], on, nn);
}
}
}

function createNbsp(o) {
return new Array(o.nbsp).join("&nbsp;&nbsp;") + o.oldVal;
}

function color(o, n) {
o.style.backgroundColor = (n == 1 ? "#EEEEEE" : "#FFFFFF");
}

this.add = function (o, root, nbsp) {
//添加对象
o.root = root ? root : o;
o.root.node = o;
o.root.isin = null;
o.onmousedown = startDrag;
o.nbsp = nbsp + 1;
if (root) root.nbsp = o.nbsp;
o.oldVal = o.innerHTML;
o.innerHTML = createNbsp(o);
};
}//document.oncontextmenu = function () {};window.onload = function () {
var d = new Drag;
d.add($("wc_1"), $("wc_1").parentNode, 0);
d.add($("wc_1_1"), false, 1);
d.add($("wc_1_2"), false, 1);
d.add($("wc_1_3"), false, 1);
d.add($("wc_2"), $("wc_2").parentNode, 0);
d.add($("wc_2_1"), false, 1);
d.add($("wc_2_2"), $("wc_2_2").parentNode, 1);
d.add($("wc_2_2_1"), false, 2);
d.add($("wc_2_2_2"), false, 2);
d.add($("wc_2_2_3"), false, 2);
d.add($("wc_2_3"), false, 1);
d.add($("wc_3"), false, 0);
d.add($("wc_4"), false, 0);
d = null;
}
</script>
</head>
<body>
<div id="status">状态栏目</div>
<div id="wc">
<div>
<div id="wc_1">wc_1</div>
<div id="wc_1_1">wc_1_1</div>
<div id="wc_1_2">wc_1_2</div>
<div id="wc_1_3">wc_1_3</div>
</div>
<div>
<div id="wc_2">wc_2</div>
<div id="wc_2_1">wc_2_1</div>
<div>
<div id="wc_2_2">wc_2_2</div>
<div id="wc_2_2_1">wc_2_2_1</div>
<div id="wc_2_2_2">wc_2_2_2</div>
<div id="wc_2_2_3">wc_2_2_3</div>
</div>
<div id="wc_2_3">wc_2_3</div>
</div>
<div id="wc_3">wc_3</div>
<div id="wc_4">wc_4</div>
</div>
</body>
</html>

解决方案 »

  1.   

    只是表达tree拖拽的一个功能的想法....
    嘿嘿..就是 isin 和 sp 和 sc 和 moveDrag 这四个函数啦...
      

  2.   

    FF真是够有性格的说..
    所以修改这个函数..
    function stopDrag() {
    //当松开时清除onmousemove方法
    document.onmousemove = document.onmouseup = null;
    var status;
    if (obj.isin != null) {
    color(obj.isin);
    status = prompt("请输入节点存放的位置：如[down|up|in]", "down");
    if (status == "down") {
    if (obj.isin == obj.isin.parentNode.childNodes[0] && obj.isin.root.nbsp)
    obj.isin = obj.isin.root;
    var nextNode = getNextNode(obj.isin);
    if (nextNode != null)
    obj.isin.parentNode.insertBefore(obj, nextNode);
    else
    obj.isin.parentNode.appendChild(obj);
    upNbsp();
    } else if (status == "up") {
    obj.isin.parentNode.insertBefore(obj, obj.isin);
    upNbsp();
    } else if (status == "in") {
    var div = document.createElement("div");
    obj.isin.parentNode.insertBefore(div, obj.isin);
    div.appendChild(obj.isin);
    div.appendChild(obj);
    obj.isin.root = div;
    upNbsp(1);
    }
    }
    obj.style.position = "static";
    }
      

  3.   

    <html>
    <head>
    <style type="text/css">
    #wc div {
    cursor:default;
    }
    html * {
    -moz-user-select: none;
    }
    </style>
    <script type="text/javascript">
    function $(id) {
    return document.getElementById(id);
    }function Drag() {
    var obj, ox, oy, nx, ny;

    function startDrag(e) {
    //当按下时初始化参数
    var e = window.event || e;
    var dx = document.body.scrollLeft, dy = document.body.scrollTop;
    if (e.button == 2) return;
    obj = this.root;
    obj.style.left = dx + e.clientX - (ox = dx + e.clientX - obj.offsetLeft);
    obj.style.top = dy + e.clientY - (oy = dy + e.clientY - obj.offsetTop);
    obj.style.position = "absolute";

    document.onmousemove = moveDrag;
    document.onmouseup = stopDrag;
    }

    function moveDrag(e) {
    //鼠标移动时改变obj的位置
    var e = window.event || e;
    var overNode;
    nx = document.body.scrollLeft + e.clientX, ny = document.body.scrollTop + e.clientY;
    obj.style.left = nx - ox + "px";
    obj.style.top = ny - oy + "px";
    //当移动的时候。。判断是否在所有的节点上方法如下
    //start
    overNode = sp(obj);
    if (overNode != null) {
    if (obj.isin != overNode) {
    $("status").innerHTML = "在 " + overNode.id + " 的后面";
    if (obj.isin != null)
    color(obj.isin);
    color(overNode, 1);
    obj.isin = overNode;
    }
    } else {
    if (obj.isin != null) {
    $("status").innerHTML = "从 " + obj.isin.id + " 后移开";
    color(obj.isin);
    obj.isin = overNode;
    }
    }
    //end
    }

    function stopDrag() {
    //当松开时清除onmousemove方法
    document.onmousemove = document.onmouseup = null;
    var status;
    if (obj.isin != null) {
    color(obj.isin);
    status = prompt("请输入节点存放的位置：如[down|up|in]", "down");
    if (status == "down") {
    if (obj.isin == obj.isin.parentNode.childNodes[0] && obj.isin.root.nbsp) {
    obj.isin.root.nbsp = obj.isin.nbsp;
    obj.isin = obj.isin.root;
    }
    var nextNode = getNextNode(obj.isin);
    if (nextNode != null)
    obj.isin.parentNode.insertBefore(obj, nextNode);
    else
    obj.isin.parentNode.appendChild(obj);
    upNbsp();
    } else if (status == "up") {
    obj.isin.parentNode.insertBefore(obj, obj.isin);
    upNbsp();
    } else if (status == "in") {
    var div = document.createElement("div");
    obj.isin.parentNode.insertBefore(div, obj.isin);
    div.appendChild(obj.isin);
    div.appendChild(obj);
    obj.isin.root = div;
    upNbsp(1);
    }
    }
    obj.style.position = "static";
    }

    function isin(o) {
    if (nx > o.offsetLeft && nx < o.offsetLeft + o.offsetWidth &&
    ny > o.offsetTop && ny < o.offsetTop + o.offsetHeight) return true;
    else return false;
    }

    function sp(o) {
    var p = o.parentNode, cs, i;
    if (!p || p == document.body) return null;
    cs = p.childNodes;
    for (i = 0 ; i < cs.length ; i ++) {
    if (cs[i].nodeType != 1 || cs[i] == o) continue;
    if (isin(cs[i])) {
    if (cs[i].childNodes.length == 1) {
    return cs[i];
    } else {
    return sc(cs[i]);
    }
    }
    }
    return sp(p);
    }

    function sc(o) {
    var cs = o.childNodes, i;
    for (i = 0 ; i < cs.length ; i ++) {
    if (cs[i].nodeType != 1) continue;
    if (isin(cs[i])) {
    if (cs[i].childNodes.length == 1)
    return cs[i];
    else
    return sc(cs[i]);
    }
    }
    return null;
    }

    function getNextNode(node) {
    var nextNode = node.nextSibling;
    if (nextNode) {
    if (nextNode.nodeType == 1)
    return nextNode;
    else
    return getNextNode(nextNode);
    } else return null;
    }

    function upNbsp(i) {
    if (!i) i = 0;
    if (obj.childNodes.length == 1) {
    obj.nbsp = obj.isin.nbsp + i;
    obj.innerHTML = createNbsp(obj);
    } else {
    updateNbsp(obj, (obj.childNodes[0].nodeType == 1 ? obj.childNodes[0] : obj.childNodes[1]).nbsp, obj.isin.nbsp + i);
    }
    }

    function updateNbsp(o, on, nn) {
    var cs = o.childNodes;
    for (var i = 0 ; i < cs.length ; i ++) {
    if (cs[i].nodeType != 1) continue;
    if (cs[i].childNodes.length == 1) {
    cs[i].nbsp = cs[i].nbsp + nn - on;
    cs[i].innerHTML = createNbsp(cs[i]);
    } else {
    updateNbsp(cs[i], on, nn);
    }
    }
    }

    function createNbsp(o) {
    return new Array(o.nbsp).join("&nbsp;&nbsp;") + o.oldVal;
    }

    function color(o, n) {
    o.style.backgroundColor = (n == 1 ? "#EEEEEE" : "#FFFFFF");
    }

    this.add = function (o, root, nbsp) {
    //添加对象
    o.root = root ? root : o;
    o.root.node = o;
    o.root.isin = null;
    o.onmousedown = startDrag;
    o.nbsp = nbsp + 1;
    if (root) root.nbsp = o.nbsp;
    o.oldVal = o.innerHTML;
    o.innerHTML = createNbsp(o);
    };
    }//document.oncontextmenu = function () {};
    document.onselectstart = function () { return false; };
    window.onload = function () {
    var d = new Drag;
    d.add($("wc_1"), $("wc_1").parentNode, 0);
    d.add($("wc_1_1"), false, 1);
    d.add($("wc_1_2"), false, 1);
    d.add($("wc_1_3"), false, 1);
    d.add($("wc_2"), $("wc_2").parentNode, 0);
    d.add($("wc_2_1"), false, 1);
    d.add($("wc_2_2"), $("wc_2_2").parentNode, 1);
    d.add($("wc_2_2_1"), false, 2);
    d.add($("wc_2_2_2"), false, 2);
    d.add($("wc_2_2_3"), false, 2);
    d.add($("wc_2_3"), false, 1);
    d.add($("wc_3"), false, 0);
    d.add($("wc_4"), false, 0);
    d = null;
    }
    </script>
    </head>
    <body>
    <div id="status">状态栏目</div>
    <div id="wc">
    <div>
    <div id="wc_1">wc_1</div>
    <div id="wc_1_1">wc_1_1</div>
    <div id="wc_1_2">wc_1_2</div>
    <div id="wc_1_3">wc_1_3</div>
    </div>
    <div>
    <div id="wc_2">wc_2</div>
    <div id="wc_2_1">wc_2_1</div>
    <div>
    <div id="wc_2_2">wc_2_2</div>
    <div id="wc_2_2_1">wc_2_2_1</div>
    <div id="wc_2_2_2">wc_2_2_2</div>
    <div id="wc_2_2_3">wc_2_2_3</div>
    </div>
    <div id="wc_2_3">wc_2_3</div>
    </div>
    <div id="wc_3">wc_3</div>
    <div id="wc_4">wc_4</div>
    </div>
    </body>
    </html>
    修改完毕