社区 学习 工具库 休闲
搜索
简体中文
javascript - 请问这个demo怎么转换成面向对象写法？
高洛峰
高洛峰 2017-04-10 16:17:26
0
1
278
<!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>
    <p 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>
    </p>
</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>

最近学了面向对象的相关知识，但是写起来还是乱七八糟的。

如果能用事件代理最好

另外还想再放一个ul，形成可以两个ul可以相互拖拽排序

万分感谢万分感谢万分感谢

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

全部回复(1)
大家讲道理
大家讲道理2017-04-10 16:19:26 1 楼

将你的代码简单改造了一下，首先将下面代码保存在一个叫做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>
    <p 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>
    </p>
</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>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板