PROMULGATOR

    *星*雨天空

    北京市北京商务中心区通信科技有限公司
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
<div class="wraper">
    <ul>
        <li>1</li>
        <li style="height: 52px; line-height: 52px;">2</li>
        <li style="height: 40px; line-height: 40px;">3</li>
        <li style="height: 100px; line-height: 100px;">4</li>
        <li>5</li>
    </ul>
    <a id="up" class="up" href="javascript:;">上移</a>
    <a id="down" class="down" href="javascript:;">下移</a>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
* {
    padding:0;
    margin:0;
}
.wraper {
    width:500px;
    border:1px #ddd solid;
    margin:100px auto;
    position:relative;
}
ul {
    list-style:none;
}
ul li {
    height:32px;
    line-height:32px;
    background-color:red;
    margin-bottom:2px;
    position:relative;
    color:#fff;
}
ul li.slt {
    background-color:green;
    color:#000;
}
.up {
    position:absolute;
    top:10px;
    right:-35px;
    display:none;
}
.down {
    position:absolute;
    top:32px;
    right:-35px;
    display:none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(document)
    //选择要移动的元素
    .on('click', 'ul li', function() {
        var _this = $(this);
        _this.addClass('slt').siblings().removeClass('slt');
        upDownBtnShow(_this);
    })
    //点击别处重置
    .on('click', function(e) {
        if ($(e.target).closest('li').length == 0 && $(e.target).closest('#up').length == 0 && $(e.target).closest('#down').length == 0) {
            $('#down,#up').hide();
            $('ul li').removeClass('slt');
        }
    })
    //向上移动
    .on("click", "#up", function() {
        moveTag('prev');
    })
    //向下移动
    .on("click", "#down", function() {
        moveTag('next');
    });
var isAnimate = false; //默认没有移动
function moveTag(type) {
    var seed = 300;
    var $c = $('li.slt');
    if (type === 'next') {
        var $nextEle = $c.next();
        if ($nextEle.length == 0) {
            alert('不能再往下移动了');
            return false;
        } else {
            if (!isAnimate) {
                isAnimate = true;
                $nextEle.css('position', 'relative').animate({
                    top: '-' + $c.outerHeight(true) + 'px'
                }, seed);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1
 立即下载

元素位置调换效果

选中元素，判断元素位置显示按钮，点击按钮移动元素位置

0