本文是在别人代码上改的，具体作者忘记了，实在抱歉，那天找到了写上来。
本人将一些暂时用不到或多余的代码删除了，改了一些代码。欢迎大家批评指导。
html部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js可拖拽位置瀑布流布局代码</title>
<script type="text/javascript" src="js/tuozhuai.js"></script>
<style type="text/css">
html, body, div, p, img, a {margin: 0;padding: 0;}
body {padding: 0px 20px;box-sizing: border-box;background-color: #252525;}
.img_100 img {width: 100%;max-width: 100%;}
.text_center {text-align: center;}
.drag_div {margin-top: 30px;width: 1300px;height: 760px;overflow: hidden;position: relative;}
.drag_div>div {position: absolute;background: #fff;padding: 5px;box-sizing: border-box;overflow: hidden;z-index: 1;}
.drag_div>div>p:first-child{margin-bottom: 15px;}
.drag_div>div.one {top: 0;left: 0;width: 20%;height: 240px;}
.drag_div>div.two {top: 260px;left: 0;width: 20%;height: 240px;}
.drag_div>div.three {top: 520px;left: 0;width: 20%;height: 240px;}
.drag_div>div.four {top: 0;left: 21%;width: 37%;height: 760px;}
.drag_div>div.five {top: 0;left: 59%;width: 20%;height: 280px;}
.drag_div>div.six {top: 300px;left: 59%;width: 20%;height: 220px;}
.drag_div>div.seven {top: 540px;left: 59%;width: 20%;height: 220px;}
.drag_div>div.eight {top: 0;left: 80%;width: 20%;height: 280px;}
.drag_div>div.nine {top: 300px;left: 80%;width: 20%;height: 220px;}
.drag_div>div.ten {top: 540px;left: 80%;width: 20%;height: 220px;}
.drag_div>div.one img, .drag_div>div.two img, .drag_div>div.three img {width: 100%;height: 180px;}
.drag_div>div.four img {width: 100%;height: 700px;}
.drag_div>div.five img, .drag_div>div.eight img {width: 100%;height: 220px;}
.drag_div>div.six img, .drag_div>div.seven img, .drag_div>div.nine img, .drag_div>div.ten img {width: 100%;height: 160px;}
</style>
</head>
<body>
<div class="drag_div" id="drag_div">
<div class="one">
<p class="img_100"><img src="images/a4.png"></p>
<p class="text_center">我是第一张</p>
</div>
<div class="two">
<p class="img_100"><img src="images/a2.png"></p>
<p class="text_center">我是第二张</p>
</div>
<div class="three">
<p class="img_100"><img src="images/a3.png"></p>
<p class="text_center">我是第三张</p>
</div>
<div class="four">
<p class="img_100"><img src="images/a1.png"></p>
<p class="text_center">我是第四张</p>
</div>
<div class="five">
<p class="img_100"><img src="images/a5.png"></p>
<p class="text_center">我是第五张</p>
</div>
<div class="six">
<p class="img_100"><img src="images/a6.png"></p>
<p class="text_center">我是第六张</p>
</div>
<div class="seven">
<p class="img_100"><img src="images/a7.png"></p>
<p class="text_center">我是第七张</p>
</div>
<div class="eight">
<p class="img_100"><img src="images/a8.png"></p>
<p class="text_center">我是第八张</p>
</div>
<div class="nine">
<p class="img_100"><img src="images/a9.png"></p>
<p class="text_center">我是第九张</p>
</div>
<div class="ten">
<p class="img_100"><img src="images/a10.png"></p>
<p class="text_center">我是第十张</p>
</div>
</div>
</body>
</html>
// js部分
window.onload = function() {
var oUl= document.getElementById("drag_div");
var aLi = oUl.getElementsByTagName('div');
var disX = 0;
var disY = 0;
var aPos =[];
for(var i=0;i<aLi.length;i++){
var t = aLi[i].offsetTop;
var l = aLi[i].offsetLeft;
aPos[i] = {left:l,top:t};
aLi[i].index = i;
aLi[i].style.cursor = "move";
setDrag(aLi[i]);
}
//拖拽
function setDrag(obj){
//obj.style.zIndex=3;这里有321，分别是默认1，点击拖拽元素3，要换位置图片2;
obj.onmousedown = function(event){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
obj.style.zIndex = 3;
//当鼠标按下时计算鼠标与拖拽对象的距离
disX = event.clientX +scrollLeft-obj.offsetLeft;
disY = event.clientY +scrollTop-obj.offsetTop;
document.οnmοusemοve=function(event){
//当鼠标拖动时计算div的位置
var l = event.clientX -disX +scrollLeft;
var t = event.clientY -disY + scrollTop;
obj.style.left = l + "px";
obj.style.top = t + "px";
}
document.onmouseup = function(){
document.onmousemove = null;//当鼠标弹起时移出移动事件
//检测是否普碰上，在交换位置
var oNear = findMin(obj);
if(oNear){
var tempName = obj.className;
obj.className=oNear.className;
oNear.className=tempName;
oNear.style.zIndex = 2;
startMove(oNear,aPos[obj.index]);
startMove(obj,aPos[oNear.index]);
//交换index
var temp = oNear.index;
oNear.index = obj.index;
obj.index = temp;
}else{
startMove(obj,aPos[obj.index]);
}
}
clearInterval(obj.timer);
return false;//低版本出现禁止符号
}
}
//碰撞检测
function colTest(obj1,obj2){
var t1 = obj1.offsetTop;
var r1 = obj1.offsetWidth+obj1.offsetLeft;
var b1 = obj1.offsetHeight+obj1.offsetTop;
var l1 = obj1.offsetLeft;
var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth+obj2.offsetLeft;
var b2 = obj2.offsetHeight+obj2.offsetTop;
var l2 = obj2.offsetLeft;
if(t1>b2||r1<l2||b1<t2||l1>r2){
return false;
}else{
return true;
}
}
//勾股定理求距离
function getDis(obj1,obj2){
var a = obj1.offsetLeft-obj2.offsetLeft;
var b = obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
}
//找到距离最近的
function findMin(obj){
var minDis = 999999999;
var minIndex = -1;
for(var i=0;i<aLi.length;i++){
if(obj==aLi[i])continue;
if(colTest(obj,aLi[i])){
var dis = getDis(obj,aLi[i]);
if(dis<minDis){
minDis = dis;
minIndex = i;
}
}
}
if(minIndex==-1){
return null;
}else{
return aLi[minIndex];
}
}
}
function getStyle(obj,attr){
return getComputedStyle(obj,null)[attr];
}
function startMove(obj,json){
//json里面是要去的位置的元素的信息(left,top)
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var isStop = true;
for(var attr in json){
var iCur = parseInt(getStyle(obj,attr));
var ispeed = (json[attr]-iCur)/8;
//运动速度如果大于0则向下取整，如果小于0想上取整；
ispeed = ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
//判断所有运动是否全部完成
if(iCur!=json[attr]){
isStop = false;
}
//运动开始
obj.style[attr] = iCur+ispeed+"px";
}
//判断是否全部完成
if(isStop){
obj.style.zIndex = 1;
clearInterval(obj.timer);
}
},30);
}
代码中的图片随意用什么图片都可以。基本原理就是当拖动一个元素时，
将它和每一个元素都对比一下，之后判断它要去哪里
3493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
