编程 Javascript

基于jquery的一个拖拽到指定区域内的效果

Posted in Javascript onSeptember 21, 2011

这个可与前两个不同了，这个是拖拽到指定的区域内的特效。其实逻辑方式差不多，只不过不同的是找到目标元素，用appendTo 的方法插入到目标元素。
具体的代码如下，有兴趣者可以试下。（由于是初学，做的简单，如果有其他的方法请给下指点，我定感激不尽哈。。。）

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>测试的拖拽功能</title> 
<style type="text/css"> 
body, div { margin: 0; paading: 0; font-size: 12px; } 
ul, li { margin: 0; padding: 0; list-style: none; } 
.clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; } 
.bor2 { padding: 20px 0 0 0; } 
.box { position: static; float: left; width: 200px; height: 800px; margin: 0 auto; margin-top: 15px; } 
.bor { position: static; width: 100px; height: 100px; margin: 0 0 5px 0 ; border: 1px solid #ccc; background: #ececec; } 
.borp { position: absolute; width: 100px; height: 80px; margin: 10px; padding: 10px; border: 1px solid #ccc; background: #ececec; } 
.bg { float:left; width: 100px; height: 100px; margin: 8px 5px 0 auto; padding: 10px; border: 1px solid #ccc; } 
.text2 { width: 200px; } 
.bgColor { border: 1px dashed #f00; } 
</style> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
var move = false; // 移动的初始化 
var $bg = $(".bg"); 
var initDiv, tarDiv, tarDivHalf = 0, wHalf = 0; //拖拽对象 目标对象 
var initPos = {x: 0, y: 0}, relPos = {x: 0, y: 0}, temPos = {x: 0, y: 0}; 
var dragPos = {x1: 0, x2: 0, y1: 0, y2: 0};// 拖拽对象的四个坐标 
var tarDivPos = {x1: 0, y1: 0, x2: 0, y2: 0}; //目标对象的四个坐标 
$(".bor").each(function() { 
$(this).mousedown(function(event) { 
borSub = $(this).index(); 
initDiv = $(".bor").eq(borSub); //拖拽对象 
// 鼠标 与 目标元素的相对坐标 
relPos.x = event.pageX - $(this).offset().left; 
relPos.y = event.pageY - $(this).offset().top; 
move = true; 
}); 
$(document).mousemove(function(event) { 
if (!move) { return false; } 
// 下列代码是 if(move)的 程序 
initDiv.removeClass("bor").addClass("borp"); 
// 目标元素随鼠标移动的坐标 
dragPos.x1 = event.pageX - relPos.x; 
dragPos.y1 = event.pageY - relPos.y; 
dragPos.x2 = dragPos.x1 + initDiv. innerWidth(); 
dragPos.y2 = dragPos.y1 + initDiv. innerHeight(); 
initDiv.css({ left: dragPos.x1 +'px', top: dragPos.y1 + 'px' }); 
$bg.each(function() { 
tarDiv = $(this); 
// 目标对象的坐标 
tarDivPos.x1 = tarDiv.offset().left; 
tarDivPos.x2 = tarDivPos.x1 + tarDiv.width(); 
tarDivPos.y1 = tarDiv.offset().top; 
tarDivPos.y2 = tarDivPos.y1 + tarDiv.height(); 
tarDivHalf = tarDiv.height()/2; //临时变量，以便于在if判断中使用 
wHalf = tarDiv.width()/2; 
if (dragPos.x2 >= tarDivPos.x1 + wHalf && dragPos.x2 <= tarDivPos.x2 + wHalf && dragPos.y2 >= tarDivPos.y1 + tarDivHalf && dragPos.y2 <= tarDivPos.y2 + tarDivHalf ) { 
if(tarDiv.children().length >0 ) {return false;}// 解决重叠元素 移动到一个目标元素 
tarDiv.removeClass("bg").addClass("bg bgColor"); 
} else { 
tarDiv.removeClass("bgColor"); 
} 
}); 
}).mouseup (function(event) { 
initDiv.appendTo($(".bgColor"));// 利用 apppendTo 方法 使拖动元素对象添加到指定的区域。 
initDiv.removeClass("borp").addClass("bor").removeAttr("style"); //恢复拖拽对象初始的样式 
move = false; 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="box"> 
<div class="bor">bor1</div> 
<div class="bor">bor2</div> 
<div class="bor">bor3</div> 
</div> 
<div class="box2"> 
<div class="bg" id="bg1"></div> 
<div class="bg" id="bg2"></div> 
<div class="bg" id="bg3"></div> 
<div class="bg" id="bg4"></div> 
<div class="bg" id="bg5"></div> 
<div class="bg" id="bg6"></div> 
<div class="bg" id="bg7"></div> 
<div class="bg" id="bg8"></div> 
<div class="bg" id="bg9"></div> 
<div class="bg" id="bg10"></div> 
<div class="bg" id="bg11"></div> 
<div class="bg" id="bg12"></div> 
<div class="bg" id="bg13"></div> 
<div class="bg" id="bg14"></div> 
<div class="bg" id="bg15"></div> 
<div class="bg" id="bg16"></div> 
<div class="bg" id="bg17"></div> 
<div class="bg" id="bg18"></div> 
<div class="bg" id="bg19"></div> 
<div class="bg" id="bg20"></div> 
<div class="bg" id="bg21"></div> 
<div class="bg" id="bg22"></div> 
<div class="bg" id="bg23"></div> 
<div class="bg" id="bg24"></div> 
<div class="bg" id="bg25"></div> 
<div class="bg" id="bg26"></div> 
<div class="bg" id="bg27"></div> 
<div class="bg" id="bg28"></div> 
<div class="bg" id="bg29"></div> 
<div class="bg" id="bg30"></div> 
<div class="bg" id="bg31"></div> 
<div class="bg" id="bg32"></div> 
<div class="bg" id="bg33"></div> 
<div class="bg" id="bg34"></div> 
<div class="bg" id="bg35"></div> 
<div class="bg" id="bg36"></div> 
<div class="bg" id="bg37"></div> 
<div class="bg" id="bg38"></div> 
<div class="bg" id="bg39"></div> 
</div> 
<div class="clear"></div> 
</body> 
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

游戏人文件夹程序 ver 3.0

Jul 14 Javascript

jQuery的slideToggle方法实例

May 07 Javascript

jQuery之日期选择器的深入解析

Jun 19 Javascript

JavaScript中闭包之浅析解读(必看篇)

Aug 25 Javascript

jquery日历插件e-calendar升级版

Nov 10 Javascript

bootstrap按钮插件（Button）使用方法解析

Jan 13 Javascript

微信小程序实现实时圆形进度条的方法示例

Feb 24 Javascript

通过js修改input、select默认字体颜色

Apr 19 Javascript

JavaScript运动框架链式运动到完美运动（五）

May 18 Javascript

JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法

Jun 19 Javascript

angular.extend方法的具体使用

Sep 14 Javascript

vue框架下部署上线后刷新报404问题的解决方案(推荐)

Apr 03 Javascript

关于onScroll事件在IE6下每次滚动触发三次bug说明

Sep 21 #Javascript

分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码

Sep 21 #Javascript

Dom操作之兼容技巧分享

Sep 20 #Javascript

js获取图片大小的函数代码

Sep 20 #Javascript

javascript中的注释使用与注意事项小结

Sep 20 #Javascript

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Sep 20 #Javascript

JavaScript高级程序设计学习笔记 js高级技巧

Sep 20 #Javascript