基于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 Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
vue实现抽屉弹窗效果
Nov 15 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
解析strtr函数的效率问题
2013/06/26 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
python中的多线程实例教程
2014/08/27 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python中import与from方法总结(推荐)
2019/03/21 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
总账会计岗位职责
2014/03/13 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
消防隐患整改通知书
2015/04/22 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python