**
js实现拖住排序并可以合并内容
**
html,
body {
width: 100%;
height: 100%;
}
#box {
margin: 50px 20px;
width: auto;
height: 100px;
position: relative;
}
.item {
width: 150px;
height: 100px;
border-radius: 5px;
margin: 5px;
float: left;
border: 1px solid lightgray;
z-index: 1;
text-align: center;
font-size: 16px;
line-height: 100px;
cursor: pointer;
user-select: none;
background-color: rgba(214,228,251,.5);
}
.spinItem {
width: 50px;
margin: 5px;
display: table-cell;
border: 1px solid lightgray;
}
div.moving {
border: 1px dashed gray;
background: white;
}
div.merge {
box-shadow: 0 0 1px 1px #4800ff;
border-radius: 5px;
}
div.mergeBig {
box-shadow: 0 0 5px 5px #5971e8;
border-radius: 5px;
}
div.draging {
width: 150px;
height: 100px;
position: absolute;
box-shadow: 0 0 2px 2px #555;
border-radius: 5px;
z-index: 500;
}
.item1{
width:200px;
height:2000px;
}
<div id="box">
<div class="item item1">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
let bstop = true; //是否可拖动
let spinBool = true; //是否是分拆
let mergeData = [] //记录合并前的值
let meThIndex = -1 //记录上一次右击的下标
//初始化
$('#box .item').each(function () {
let ret = {
contents: []
}
ret.contents.push($(this).text())
mergeData.push(ret)
})
$('#box').on("mousedown", ".item", function (e) {
if (e.button == 0) { //左击
if (bstop) {
bstop = false;
let that = this;
let disx = e.offsetX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
let disy = e.offsetY;
let $clone = $(that).clone(); //克隆
$clone.addClass('draging').css({ //对克隆的盒子设置类名以及位置
left: $(this).position().left,
top: $(this).position().top
});
$('#box').append($clone); //追加到box里面
$(that).addClass('moving').html(''); //被克隆的元素添加类移除内容
$('#box').on('mousemove', function (e) { //对克隆的盒子进行拖拽
$clone.css({
left: e.pageX - $(this).offset().left - disx,
top: e.pageY - $(this).offset().top - disy
})
let minIndex = $(that).index(); //最小索引赋初始值
let minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
let $minbox //最小索引的盒子
$('#box .item').not(':last').each(function () { //不包括克隆的那个盒子
$(this).removeClass('merge')
$(this).removeClass('mergeBig')
let smalldistance = Math.sqrt(Math.pow($clone.position().left - $(this).position().left, 2) + Math.pow($clone.position().top - $(this).position().top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
if (smalldistance < minValue) { //比较
minValue = smalldistance; //获取最小值
minIndex = $(this).index(); //获取最小值对应的索引
}
});
$minbox = $('#box .item').eq(minIndex); //最小索引的盒子
if (minValue < 20) { //距离小到一定程度，合并
$minbox.addClass('mergeBig')
} else {
$minbox.addClass('merge')
}
});
$clone.on('mouseup', function () {
$('#box').off('mousemove'); //取消mousemove事件
let minIndex = $(that).index(); //最小索引赋初始值
let minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
$('#box .item').not(':last').each(function () { //不包括克隆的那个盒子
let smalldistance = Math.sqrt(Math.pow($clone.position().left - $(this).position().left, 2) + Math.pow($clone.position().top - $(this).position().top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
if (smalldistance < minValue) { //比较
minValue = smalldistance; //获取最小值
minIndex = $(this).index(); //获取最小值对应的索引
}
});
if (minIndex == $(that).index()) { //如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。
$clone.animate($(that).position(), 400, function () {
$(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
$(this).remove(); //移除被克隆的盒子
bstop = true;
});
let $minbox = $('#box .item').eq(minIndex); //最小索引的盒子
$minbox.removeClass('merge')
$minbox.removeClass('mergeBig')
} else {
let thatIndex = $(that).index()
let $minbox = $('#box .item').eq(minIndex); //最小索引的盒子
if ($minbox.hasClass("mergeBig")) {//合并
let content = $minbox.text() + $clone.text()
let $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
$clone2.addClass('draging').css({
left: $minbox.position().left,
top: $minbox.position().top
})
$minbox.text(content)
$minbox.removeClass('mergeBig')
$('#box').append($clone2); //追加
$clone.remove(); //移除克隆的盒子
$clone2.remove(); //移除最小盒子
$('#box .item').each(function () {
if ($(this).hasClass("moving")) {
$(this).remove()
}
});
mergeData.forEach((item, index) => {
if (index == minIndex) {
item.contents = [...item.contents, ...mergeData[thatIndex].contents]
}
})
mergeData.splice(thatIndex, 1)
bstop = true;
} else { //换位置
$minbox.removeClass('merge')
let $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
$clone2.addClass('draging').css({
left: $minbox.position().left,
top: $minbox.position().top
})
$('#box').append($clone2); //追加
$minbox.addClass('moving').html('');
$clone.animate($minbox.position(), 400, function () { //克隆的内容运动到最小索引的盒子的位置
$minbox.removeClass('moving').html($clone.html()); //移除相关样式，添加内容
$clone.remove(); //移除克隆的盒子
bstop = true;
});
$clone2.animate($(that).position(), 400, function () {
$(that).removeClass('moving').html($clone2.html());
$clone2.remove();
bstop = true;
});
}
}
});
}
} else if (e.button == 2) { //右击
bstop = false
let that = this;
let merIndex = $(that).index()
if (meThIndex != merIndex && mergeData[merIndex].contents.length > 1) { //右击加载分拆数据
meThIndex = merIndex
let spinHtml = ""
mergeData[merIndex].contents.forEach(item=> {
spinHtml += "<div class='spinItem'>" + item + "</div>"
})
$(that).append(spinHtml)
$(".spinItem").click(function (e) {
let $spin = $(that).clone()
$spin.text($(this).text())
mergeData.push({ contents: [$(this).text()] })
$('#box').append($spin); //追加到box里面
let merIndx = mergeData[merIndex].contents.findIndex(it => it == $(this).text())
if (merIndex != -1)
mergeData[merIndex].contents.splice(merIndx, 1)
$(that).text("")
let text = ""
mergeData[merIndex].contents.forEach(item => {
text += item
})
$(that).text(text)
$(this).remove()
meThIndex = -1
bstop = true
})
} else { //收起分拆数据
$(that).find(".spinItem").each(function () {
$(this).remove()
})
meThIndex = -1
bstop = true
}
}
});
//去掉浏览器默认的右击事件
document.oncontextmenu = function (e) {
e.preventDefault()
}
</script>
4002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
