이는 앞의 두 가지와 다른 점으로, 지정된 영역으로 드래그되는 특수 효과입니다. 실제로 로직 방식은 비슷하지만, 차이점은 대상 요소를 찾아 AppendTo 메서드를 사용하여 대상 요소에 삽입한다는 점입니다. 구체적인 코드는 다음과 같습니다. 관심 있는 분은 사용해 보세요. (초보자라 쉽네요. 다른 방법 있으면 조언 부탁드립니다. 정말 감사하겠습니다...) 복사 코드 코드는 다음과 같습니다. 测试的拖拽功能 <br>body, div { margin: 0; paading: 0; font-size: 12px; } <br>ul, li { margin: 0; padding: 0; list-style: none; } <br>.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; } <br>.bor2 { padding: 20px 0 0 0; } <br>.box { position: static; float: left; width: 200px; height: 800px; margin: 0 auto; margin-top: 15px; } <br>.bor { position: static; width: 100px; height: 100px; margin: 0 0 5px 0 ; border: 1px solid #ccc; background: #ececec; } <br>.borp { position: absolute; width: 100px; height: 80px; margin: 10px; padding: 10px; border: 1px solid #ccc; background: #ececec; } <br>.bg { float:left; width: 100px; height: 100px; margin: 8px 5px 0 auto; padding: 10px; border: 1px solid #ccc; } <br>.text2 { width: 200px; } <br>.bgColor { border: 1px dashed #f00; } <br> <br>$(document).ready(function() { <br>var move = false; // 移动的初始化 <br>var $bg = $(".bg"); <br>var initDiv, tarDiv, tarDivHalf = 0, wHalf = 0; //拖拽对象 目标对象 <br>var initPos = {x: 0, y: 0}, relPos = {x: 0, y: 0}, temPos = {x: 0, y: 0}; <br>var dragPos = {x1: 0, x2: 0, y1: 0, y2: 0};// 拖拽对象的四个坐标 <br>var tarDivPos = {x1: 0, y1: 0, x2: 0, y2: 0}; //目标对象的四个坐标 <br>$(".bor").each(function() { <br>$(this).mousedown(function(event) { <br>borSub = $(this).index(); <br>initDiv = $(".bor").eq(borSub); //拖拽对象 <br>// 鼠标 与 目标元素的相对坐标 <br>relPos.x = event.pageX - $(this).offset().left; <br>relPos.y = event.pageY - $(this).offset().top; <br>move = true; <br>}); <br>$(document).mousemove(function(event) { <br>if (!move) { return false; } <br>// 下列代码是 if(move)的 程序 <br>initDiv.removeClass("bor").addClass("borp"); <br>// 目标元素随鼠标移动的坐标 <br>dragPos.x1 = event.pageX - relPos.x; <br>dragPos.y1 = event.pageY - relPos.y; <br>dragPos.x2 = dragPos.x1 + initDiv. innerWidth(); <br>dragPos.y2 = dragPos.y1 + initDiv. innerHeight(); <br>initDiv.css({ left: dragPos.x1 +'px', top: dragPos.y1 + 'px' }); <br>$bg.each(function() { <br>tarDiv = $(this); <br>// 目标对象的坐标 <br>tarDivPos.x1 = tarDiv.offset().left; <br>tarDivPos.x2 = tarDivPos.x1 + tarDiv.width(); <br>tarDivPos.y1 = tarDiv.offset().top; <br>tarDivPos.y2 = tarDivPos.y1 + tarDiv.height(); <br>tarDivHalf = tarDiv.height()/2; //临时变量,以便于在if判断中使用 <br>wHalf = tarDiv.width()/2; <br>if (dragPos.x2 >= tarDivPos.x1 + wHalf && dragPos.x2 <= tarDivPos.x2 + wHalf && dragPos.y2 >= tarDivPos.y1 + tarDivHalf && dragPos.y2 <= tarDivPos.y2 + tarDivHalf ) { <BR>if(tarDiv.children().length >0 ) {return false;}// 解决重叠元素 移动到一个目标元素 <br>tarDiv.removeClass("bg").addClass("bg bgColor"); <br>} else { <br>tarDiv.removeClass("bgColor"); <br>} <br>}); <br>}).mouseup (function(event) { <br>initDiv.appendTo($(".bgColor"));// 利用 apppendTo 方法 使拖动元素对象添加到指定的区域。 <br>initDiv.removeClass("borp").addClass("bor").removeAttr("style"); //恢复拖拽对象初始的样式 <br>move = false; <br>}); <br>}); <br>}); <br> bor1 bor2 bor3