<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul, li, div, span, img{margin: 0; padding: 0;}
#mydiv
{
width: 900px;
background-color: #fff;
border: 1px solid #000;
position: absolute;
left: 100px;
height: 500px;
overflow: scroll;
}
#mydiv ul{position: relative; overflow: hidden; list-style: none; margin-top: 10px; margin-left: 10px;}
#mydiv li{float: left; background-color: #e1e1e1; margin-left: 10px; margin-bottom: 10px; width: 200px; height: 226px; position: relative;}
#mydiv span{display: block; padding: 4px 10px;}
img{width: 200px; height: 200px; background-color: #999;}
.moveEle{position: absolute; z-index: 2; background-color: #e1e1e1; width: 200px; height: 226px; left: 0; right: 0;}
</style>
<script src="../../jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv">
<ul>
<li class="">
<span>1</span>
<img src="images/img1.jpg" width="200" height="200"/>
</li>
<li>
<span>2</span>
<img src="images/img2.jpg" width="200" height="200"/>
</li>
<li>
<span>3</span>
<img src="images/img3.jpg" width="200" height="200"/>
</li>
<li>
<span>4</span>
<img src="images/img4.jpg" width="200" height="200"/>
</li>
<li>
<span>5</span>
<img src="images/img5.jpg" width="200" height="200"/>
</li>
<li>
<span>6</span>
<img src="images/img6.jpg" width="200" height="200"/>
</li>
<li>
<span>7</span>
<img src="images/img7.jpg" width="200" height="200"/>
</li>
<li>
<span>8</span>
<img src="images/img8.jpg" width="200" height="200"/>
</li>
<li>
<span>9</span>
<img src="images/img9.jpg" width="200" height="200"/>
</li>
<li>
<span>10</span>
<img src="images/img10.jpg" width="200" height="200"/>
</li>
<li>
<span>11</span>
<img src="images/img11.jpg" width="200" height="200"/>
</li>
<li>
<span>12</span>
<img src="images/img12.jpg" width="200" height="200"/>
</li>
</ul>
</div>
<script src="../../jquery-1.7.2.js"></script>
<script type="text/javascript">
/**
*元素移动效果
* made by keimon
*/
$(function () {
var _bool = false, //鼠标是否按下
cloneEle,
moveEle,
evtX,
evtY;
$('ul li').on('mousedown', function (e) {
_bool = true;
cloneEle = $(this).clone(true);
moveEle = "<div class='moveEle'>"+cloneEle.html()+"</div>"; //移动的新元素
$('body').append(moveEle);
$(this).html("").addClass('emptyEle'); //空元素
evtX = e.pageX;
evtY = e.pageY;
$('.moveEle').css('left', evtX + 'px');
$('.moveEle').css('top', evtY + 'px');
});
$(document).delegate('li','mousemove', function (e) {
if (!_bool) {
return false
}
evtX = e.pageX;
evtY = e.pageY;
$('.moveEle').css('left', evtX + 'px');
$('.moveEle').css('top', evtY + 'px');
if($(e.currentTarget).hasClass('emptyEle')){
return false;
}else{
var curIndex = $('ul li').index($(e.currentTarget));
var empIndex = $('ul li').index($('.emptyEle'));
if(curIndex<empIndex){
$(e.currentTarget).before($('.emptyEle'));
}else{
$(e.currentTarget).after($('.emptyEle'));
}
}
});
$(document).bind('mouseup', function () {
if (_bool) {
cloneEle.css({'left':'auto', 'top':'auto'});
$('.emptyEle').replaceWith(cloneEle);
$('.moveEle').remove();
_bool = false;
}
})
})
</script>
</body>
</html>
元素的拖拽与重排
最新推荐文章于 2024-03-12 10:43:27 发布