**
**
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>