关于div的拖动排序问题

使用js数组自动产生如下html代码：
<div id="001">北京</div><br />
<div id="002">上海</div><br />
<div id="003">广州</div><br />
<div id="004">天津</div><br />
问题是：如何使用鼠标拖动div(或者每个div后面有个上移下移的按钮)的同时，将div的id序号同时改变呢？也就是移动后，div的id会随着div的位置变化而自动变化？找了好多代码，似乎只能随意排列div，没有更改id的功能。应该怎么做呢？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

在拖动完成后做处理如果拖动是用的绝对位置的话，排列这些DIV的style.top，从小到大，然后设置DIV的id
如果拖动用的是html的位置的话，document.getElementsByTagName("DIV"),然后循环依次设置id
<html>
    <head>
        <title>Simulated Drag And Drop Example</title>        <script type="text/javascript">

            var iDiffX = 0;
            var iDiffY = 0;
            var oDiv;
            function handleMouseMove() {
                var oEvent = EventUtil.getEvent();
                //oDiv = document.getElementById("001");
                oDiv.style.left = oEvent.clientX - iDiffX;
                oDiv.style.top = oEvent.clientY - iDiffY;
            }
            var index=4;
            function handleMouseDown(id) {
                var oEvent = EventUtil.getEvent();
                oDiv = document.getElementById(id);
                oDiv.style.zIndex=++index;
                iDiffX = oEvent.clientX - oDiv.offsetLeft;
                iDiffY = oEvent.clientY - oDiv.offsetTop;

                EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove);
                EventUtil.addEventHandler(document.body, "mouseup", handleMouseUp);
            }

            function handleMouseUp() {
                EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove);
                EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp);
            }
            var EventUtil = new Object;
            EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
                if (oTarget.addEventListener) {
                    oTarget.addEventListener(sEventType, fnHandler, false);
                } else if (oTarget.attachEvent) {
                    oTarget.attachEvent("on" + sEventType, fnHandler);
                } else {
                    oTarget["on" + sEventType] = fnHandler;
                }
            };            EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
                if (oTarget.removeEventListener) {
                    oTarget.removeEventListener(sEventType, fnHandler, false);
                } else if (oTarget.detachEvent) {
                    oTarget.detachEvent("on" + sEventType, fnHandler);
                } else {
                    oTarget["on" + sEventType] = null;
                }
            };            EventUtil.formatEvent = function (oEvent) {                if (typeof oEvent.charCode == "undefined") {
                    oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
                    oEvent.isChar = (oEvent.charCode > 0);
                }                if (oEvent.srcElement && !oEvent.target) {
                    oEvent.eventPhase = 2;
                    oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
                    oEvent.pageY = oEvent.clientY + document.body.scrollTop;                    if (!oEvent.preventDefault) {
                        oEvent.preventDefault = function () {
                            this.returnValue = false;
                        };
                    }                    if (oEvent.type == "mouseout") {
                        oEvent.relatedTarget = oEvent.toElement;
                    } else if (oEvent.type == "mouseover") {
                        oEvent.relatedTarget = oEvent.fromElement;
                    }                    if (!oEvent.stopPropagation) {
                        oEvent.stopPropagation = function () {
                            this.cancelBubble = true;
                        };
                    }                    oEvent.target = oEvent.srcElement;
                    oEvent.time = (new Date).getTime();                }                return oEvent;
            };            EventUtil.getEvent = function() {
                if (window.event) {
                    return this.formatEvent(window.event);
                } else {
                    return EventUtil.getEvent.caller.arguments[0];
                }
            };        </script>
        <style type="text/css">
            #001 {
                background-color: yellow;
                height: 100px;
                width: 100px;
                position: absolute;            }
            #002 {
                background-color: green;
                height: 100px;
                width: 100px;
                position: absolute;
            }
            #003 {
                background-color: blue;
                height: 100px;
                width: 100px;
                position: absolute;
            }
            #004 {
                background-color: red;
                height: 100px;
                width: 100px;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="001" onmousedown='handleMouseDown("001")' style="z-index:1">北京</div><br />
        <div id="002" onmousedown='handleMouseDown("002")' style="z-index:2">上海</div><br />
        <div id="003" onmousedown='handleMouseDown("003")' style="z-index:3">广州</div><br />
        <div id="004" onmousedown='handleMouseDown("004")' style="z-index:4">天津</div><br />
    </body>
</html>
拖动div后进行处理，让交换位置的两个div的id值互换
3楼的在firfox没有反应。应该考虑浏览器兼容问题。
3楼兄弟，好像你的代码只能是拖动，能否自动更新div的序号呢？
我以为你是要改变他的顺序,这代码实现的就是当前拖动的放最前面这个功能你要改变的是<div id=xxx> 里面的这个id=xxx?
不知你改变这个ID做何用?可以把id属性里的值改变模拟来实现改变id的功能,因为元素是靠id引用的,id改变了元素引用会出点问题
是这样的，html中的所有div是js数组循环产生的，比如这样的代码：<div id=\"tab"+i+"\"><textarea name=\'text"+i+"\' type=\'text\' id=\'text"+i+"\'><\/textarea><\/div>这些由js数组产生的div，会在当前节点前面或者后面新增或者删除一些div（因为需要有新增、删除div的功能），所以当出现删除、新增div后，所有div里面循环的js变量能否同时更新呢？按照div实际的位置来更新js变量，以便于在保存数据的时候，用数组接收的时候不会出错。我的思路可能有点问题。。
我是用asp数组来接收数据的
如果是用数组接收数据的时候，不用按照1、2、3、4这样的顺序接收，而是按照实际在html中的位置来接收并保存，就不用鼠标拖动去更改div的id及相关js变量了、。