请问这个demo怎么转换成面向对象写法？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>task2_5</title> <style> * { padding: 0; margin: 0; list-style: none; } #wrap { margin: 100px; auto; width: 980px; } ul { position: relative; height: 310px; float: left; margin-left:200px; border: 1px solid #10a399; } li { width: 200px; height: 30px; background: #c1f3f3; border-bottom: 1px solid #10a399; text-align: center; color: #999; line-height: 30px; } </style> </head> <body> <div id="wrap"> <ul id="ul1"> <li id="move">1</li> <li class="move">2</li> <li class="move">3</li> <li class="move">4</li> <li class="move">5</li> </ul> </div> </body> <script type="text/javascript"> var ul = document.getElementById('ul1'); var aLi = ul.getElementsByTagName('li'); var liTop = aLi[0].offsetTop; var liHeight = aLi[0].offsetHeight; for(var i=0; i<aLi.length; i++){ drag(aLi[i]); } function drag(obj) { obj.onmousedown = function(ev) { var ev = ev || event; var blank = document.createElement('li'); ul.insertBefore(blank,obj.nextSibling); blank.style.visibility = 'hidden'; obj.style.left = obj.offsetLeft + 'px'; obj.style.top = obj.offsetTop + 'px'; obj.style.position = "absolute"; obj.style.zIndex = '999'; obj.style.background = '#e0543e'; var disX = ev.clientX - obj.offsetLeft; var disY = ev.clientY - obj.offsetTop; if (obj.setCapture) {obj.setCapture();} document.onmousemove = function(ev) { var ev = ev || event; var L = ev.clientX - disX; var T = ev.clientY - disY; var n = Math.round((T-liTop)/liHeight + 1); ul.insertBefore(blank,ul.children[n]); obj.style.left = L + 'px'; obj.style.top = T + 'px'; }; document.onmouseup = function() { ul.insertBefore(obj,blank); obj.removeAttribute('style'); ul.removeChild(blank); document.onmousemove = null; if (obj.releaseCapture) {obj.releaseCapture();} }; return false; }; } </script> </html>

将你的代码简单改造了一下，首先将下面代码保存在一个叫做drag.js的文件中
这个简单封装的库基本上就是你的代码稍微修改而来，当然改进的空间还很大，运用了事件委托的方式添加事件。

;
(function(ROOT, undefined) {

var Drag = function(parent) {
    return new Drag.fn.init(parent);
}

Drag.prototype = Drag.fn = {

    constructor: Drag,

    init: function(parent) {
        if (typeof parent === 'object') {
            this.parent = parent;
        }
        else if (typeof parent === 'string' && parent.indexOf('#') === 0) {
            var id = parent.slice(1);
            this.parent = document.getElementById(id);
        }
        else if (typeof parent === 'string' && parent.indexOf('.') === 0) {
            var cls = parent.slice(1);
            this.parent = document.getElementByClassName(cls)[0];
        };
    },

    changeChild: function() {

        var ul = this.parent;

        ul.onmousedown = function(ev) {
            var ev = ev || event,
                obj = ev.target || ev.srcElement,
                liTop = obj.offsetTop,
                liHeight = obj.offsetHeight;
      
            blank = document.createElement('li');

            ul.insertBefore(blank,obj.nextSibling);
            blank.style.visibility = 'hidden';

            obj.style.left = obj.offsetLeft + 'px';
            obj.style.top = obj.offsetTop + 'px';
            obj.style.position = "absolute";
            obj.style.zIndex = '999';
            obj.style.background = '#e0543e';

            var disX = ev.clientX - obj.offsetLeft;
            var disY = ev.clientY - obj.offsetTop;

            document.onmousemove = function(ev) {
                var ev = ev || event,
                    L = ev.clientX - disX,
                    T = ev.clientY - disY,
                    n = Math.round((T-liTop)/liHeight + 1);
        
                ul.insertBefore(blank,ul.children[n]);

                obj.style.left = L + 'px';
                obj.style.top = T + 'px';
            };

            document.onmouseup = function() {
                ul.insertBefore(obj,blank);
                obj.removeAttribute('style');
                ul.removeChild(blank);
                document.onmousemove = null;
            };
            return false;
        };
    },
}

Drag.fn.init.prototype = Drag.fn;

ROOT.Drag = ROOT.__ = Drag;

})(window);

因为事件是添加到父级ul的上面，因此，调用的时候，只需将ul的id传入即可，使用方式如下

__('#ul1').changeChild();

你也可以用如下完整代码来查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task2_5</title>
    <style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #wrap {
        margin: 100px; auto;
        width: 980px;
    }
    ul {
        position: relative;
        height: 310px;
        float: left;
        margin-left:200px;
        border: 1px solid #10a399;
    }
    li {
        width: 200px;
        height: 30px;
        background: #c1f3f3;
        border-bottom: 1px solid #10a399;
        text-align: center;
        color: #999;
        line-height: 30px;
    }


    </style>
</head>
<body>
    <div id="wrap">
        <ul id="ul1">
            <li id="move">1</li>
            <li class="move">2</li>
            <li class="move">3</li>
            <li class="move">4</li>
            <li class="move">5</li>
        </ul>
    </div>
</body>
<script type="text/javascript">

/**
 * 封装部分，你可以将该部分直接放在一个单独的js文件中，然后引用即可
 */

;
(function(ROOT, undefined) {

var Drag = function(parent) {
    return new Drag.fn.init(parent);
}

Drag.prototype = Drag.fn = {

    constructor: Drag,

    init: function(parent) {
        if (typeof parent === 'object') {
            this.parent = parent;
        }
        else if (typeof parent === 'string' && parent.indexOf('#') === 0) {
            var id = parent.slice(1);
            this.parent = document.getElementById(id);
        }
        else if (typeof parent === 'string' && parent.indexOf('.') === 0) {
            var cls = parent.slice(1);
            this.parent = document.getElementByClassName(cls)[0];
        };
    },

    changeChild: function() {

        var ul = this.parent;

        ul.onmousedown = function(ev) {
            var ev = ev || event,
                obj = ev.target || ev.srcElement,
                liTop = obj.offsetTop,
                liHeight = obj.offsetHeight;
      
            blank = document.createElement('li');

            ul.insertBefore(blank,obj.nextSibling);
            blank.style.visibility = 'hidden';

            obj.style.left = obj.offsetLeft + 'px';
            obj.style.top = obj.offsetTop + 'px';
            obj.style.position = "absolute";
            obj.style.zIndex = '999';
            obj.style.background = '#e0543e';

            var disX = ev.clientX - obj.offsetLeft;
            var disY = ev.clientY - obj.offsetTop;

            document.onmousemove = function(ev) {
                var ev = ev || event,
                    L = ev.clientX - disX,
                    T = ev.clientY - disY,
                    n = Math.round((T-liTop)/liHeight + 1);
        
                ul.insertBefore(blank,ul.children[n]);

                obj.style.left = L + 'px';
                obj.style.top = T + 'px';
            };

            document.onmouseup = function() {
                ul.insertBefore(obj,blank);
                obj.removeAttribute('style');
                ul.removeChild(blank);
                document.onmousemove = null;
            };
            return false;
        };
    },
}

Drag.fn.init.prototype = Drag.fn;

ROOT.Drag = ROOT.__ = Drag;

})(window);

__('#ul1').changeChild();

</script>
</html>

请问这个demo怎么转换成面向对象写法？

相关课程

相关电子书

相关实验场景