1，实现功能：从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中
并实现app向后移动一个元素的位置；
2.实现思路：
01.遍历下拉菜单，添加拖拽方法，实现位置移动功能；
02.遍历app列表，将app位置存为数组，进行循环；
03.拖拽元素与当前app做碰撞检测；
04.如果鼠标在app内部，则将拖拽元素添加到当前app之后，位置设置为当前 i 的值；
参考代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
#tp{height:50px;width:310px;margin：0 auto;list-style:none;}
.tps{height:40px;width:60px;float:left;text-align:center;background:#e4393c;line-height:40px;margin-right:1px;
}
.container{height:500px;width:600px;background:#ccc;margin:0 auto;}
.container ul{list-style:none;height:300px;width:500px;margin:0 auto;}
.inner{height:40px;width:59px;float:left;text-align:center;background:#666;line-height:40px;margin-right:1px;
margin-top:1px;
}
.green{background:green;}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<ul id="tp">
<li class="tps">关于我</li>
<li class="tps">你好</li>
<li class="tps">信息</li>
<li class="tps">服务</li>
<li class="tps">假期</li>
</ul>
<div class="container">
<ul>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
<li class="inner"></li>
</ul>
</div>
<script>
$(function(){
function Pointer(x,y){
this.x = x;
this.y = y;
}
function Position(left,top){
this.left = left;
this.top = top;
}
$(‘.tps‘).each(function(i){
this.init = function(){
$(this).attr(‘index‘,i);
this.drag();
}
this.moveback = function(callback){
$(this).animate({
left:this.pos.left,
top:this.pos.top
},500)
}
this.Check = function(){
var currentItem = this;
var clision = null;
var position = [];
$(‘.inner‘).each(function(){
const { top, left } = $(this).offset();
position.push({
top:top,
left:left
});
$(this).attr(‘index‘,i);
//index.push($(this).index());
if( currentItem.pointer.x >$(this).offset().left &&
currentItem.pointer.y > $(this).offset().top &&
(currentItem.pointer.x < $(this).offset().left + $(this).width()) &&
(currentItem.pointer.y < $(this).offset().top + $(this).height())
){
$(this).after($(currentItem));
}
})
//console.log(startIndex)
//console.log(endIndex)
console.log(position)
}
this.add = function(){
}
this.drag = function(){
var oldposition = new Position();
var oldpointer = new Pointer();
var currentItem = null;
var isDrag = false ;
$(this).mousedown(function(e){
e.preventDefault();
oldposition.left = $(this).offset().left;
oldposition.top = $(this).offset().top;
oldpointer.x = e.clientX;
oldpointer.y = e.clientY;
currentItem = this;
isDrag = true;
})
$(document).mousemove(function(e){
var currentpointer = new Pointer(e.clientX,e.clientY);
if(!isDrag) return false;
$(currentItem).css(‘opacity‘,0.7);
var left = currentpointer.x - oldpointer.x + oldposition.left;
var top = currentpointer.y - oldpointer.y + oldposition.top;
$(currentItem).css({
position:‘absolute‘,
left : left,
top : top
});
currentItem.pointer = currentpointer;
})
$(document).mouseup(function(){
if(!isDrag) return false;
isDrag = false;
$(currentItem).css({
position:‘‘,
});
/**
currentItem.moveback(function(){
$(this).css({
"opacity" : "1",
"z-index" : 0
});
});
**/
currentItem.Check();
})
}
this.init();
})
})
</script>
</div>
</body>
</html>
仅作参考 。。。。。
时间： 2024-10-17 12:01:00