国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 請問這個demo怎么轉(zhuǎn)換成面向?qū)ο髮懛ǎ?/div>

高洛峰 2017-04-10 16:17:26

313

<!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>

最近學(xué)了面向?qū)ο蟮南嚓P(guān)知識，但是寫起來還是亂七八糟的。

如果能用事件代理最好

另外還想再放一個ul，形成可以兩個ul可以相互拖拽排序

萬分感謝萬分感謝萬分感謝

高洛峰

擁有18年軟件開發(fā)和IT教學(xué)經(jīng)驗。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項目經(jīng)理、高級軟件工程師等職務(wù)。網(wǎng)絡(luò)人氣名人講師，...

reply all(1)

大家講道理2017-04-10 16:19:26 1 floor

將你的代碼簡單改造了一下，首先將下面代碼保存在一個叫做drag.js的文件中
這個簡單封裝的庫基本上就是你的代碼稍微修改而來，當(dāng)然改進(jìn)的空間還很大，運用了事件委托的方式添加事件。

;
(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的上面，因此，調(diào)用的時候，只需將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>