基于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 相关文章推荐
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
js倒计时抢购实例
Dec 20 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
js实现盒子移动动画效果
Aug 09 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
You might like
使用php来实现网络服务
2009/09/15 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
夏季奶茶店创业计划书
2014/01/16 职场文书
销售团队口号大全
2014/06/06 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
先进班集体申报材料
2014/12/26 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫