请问这个demo怎么转换成面向对象写法? -问答-阿里云开发者社区-阿里云

开发者社区> 杨冬芳> 正文

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

2016-06-06 13:35:24 1684 1
<!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>

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

如果能用事件代理最好

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

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:28:22

    将你的代码简单改造了一下,首先将下面代码保存在一个叫做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>
    0 0
+关注
杨冬芳
IT从业
1
文章
9167
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载