これは、前の 2 つとは異なり、指定された領域にドラッグされる特殊効果です。実際、ロジック メソッドは似ていますが、異なる点は、ターゲット要素を検索し、appendTo メソッドを使用してターゲット要素に挿入することです。 具体的なコードは以下の通りです。興味のある方は試してみてください。 (初心者なので簡単にできます。他の方法があればアドバイスをお願いします。よろしくお願いします…) コピーcode コードは次のとおりです: 测试的拖拽功能 <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
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
