元素位置调换效果

Html

Css

* {
	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;
}

$(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);
                $c.css('position', 'relative').animate({
                    top: $nextEle.outerHeight(true)
                }, seed, function() {
                    isAnimate = false;
                    $nextEle.css({
                        top: 'auto'
                    }).after($c.css({
                        top: 'auto'
                    }));
                    upDownBtnShow($('li.slt'));
                });
            }
        }
    } else if (type === 'prev') {
        var $nextEle = $c.prev();
        if ($nextEle.length == 0) {
            alert('不能再往上移动了');
            return false;
        } else {
            if (!isAnimate) {
                isAnimate = true;
                $nextEle.css('position', 'relative').animate({
                    top: $c.outerHeight(true)
                }, seed);
                $c.css('position', 'relative').animate({
                    top: '-' + $nextEle.outerHeight(true) + 'px'
                }, seed, function() {
                    isAnimate = false;
                    $nextEle.css({
                        top: 'auto'
                    }).before($c.css({
                        top: 'auto'
                    }));
                    upDownBtnShow($('li.slt'));
                });
            }
        }
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1

立即下载

元素位置调换效果



代码描述：点击按钮互换两个元素的位置

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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

星雨天空

相关代码