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

高洛峰

拥有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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>