01-js对象和jq对象互相转换使用实例-jQuery实例
2017-04-23 01:17
579 查看
<!DOCTYPE HTML> <html> <head> <title>index</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-海牙"> <style type='text/css'> * { margin: 0; padding: 0; } body { background-color: #222222; -webkit-user-select: none; } #wrap { width: 660px; height: 420px; margin: 100px auto; position: relative; box-shadow: 0 0 2px } #wrap .box { width: 200px; height: 120px; border-radius: 10px; position: absolute; padding: 10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;cursor: pointer } #wrap .box img { border-radius: 10px; width: 200px; height: 120px; box-shadow: 0 0 2px #222222 } #wrap .box.on { z-index: 999; opacity: 0.8 } </style> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div id="wrap"> <div class="box"><img src="img/1.png" alt="" width="200" height="120"></div> <div class="box"><img src="img/2.png" alt="" width="200" height="120"></div> <div class="box"><img src="img/3.png" alt="" width="200" height="120"></div> <div class="box"><img src="img/4.png" alt="" width="200" height="120"></div> <div class="box"><img src="img/5.png" alt="" width="200" height="120"></div> <div class="box"><img src="img/6.png" alt="" width="200" height="120"></div> <div class="box"><img src="img/7.png" alt="" width="200" height="120"></div> <div class="box"><img src="img/8.png" alt="" width="200" height="120"></div> <div class="box"><img src="img/9.png" alt="" width="200" height="120"></div> </div> <script> /*js对象和jq对象互相转换使用实例*/ /* * jq对象不等于本身 * alert($('#wrap')==$('#wrap')); 没一次都是一个新的jq对象 * 而js对象等于本身 * alert($('#wrap')[0]==$('#wrap')[0]); * * * * * */ var $wrap = $('#wrap'); var $box = $('#wrap .box'); var w = $box.outerWidth(true); var h = $box.outerHeight(true); var length = $box.length; //建立数组 var arr = []; //根据box数量填充数组 for (var i = 0; i < length; i++) arr[i] = i; //关键点 //初始化布局 (function () { //根据每个box的序列号来确定他的位置并且为js对象赋予属性top和left,根据js对象的属性来对相应的 //jq对象进行css操作 $box.each(function (i) { this.top = parseInt(i / 3) * h; this.left = parseInt(i % 3) * w; $(this).css({ top: this.top + 'px', left: this.left + 'px' }); }); })(); //拖拽三要素1 按下鼠标 $box.mousedown(function (e) { e = e || window.event; //按下鼠标时鼠标的x坐标和y坐标 var eX = e.pageX; var eY = e.pageY; //获取当前触发事件的对象,并且转存This var This = this; //将当前对象的相对定位值存储起来 var sL = $(this).position().left; var sT = $(this).position().top; $(this).addClass('on'); //声明一个moveIndex var moveIndex; //遍历arr数组 确定当前鼠标移动的对象在arr中的映射 for (var i = 0; i < arr.length; i++) { if ($box.eq(arr[i])[0] == $(this)[0]) { //将其赋给moveIndex moveIndex = i; break; }; }; //拖拽三要素 2 移动 $(document).mousemove(function (e) { //获取当前鼠标位置的x和y坐标 var nX = e.pageX; var nY = e.pageY; //根据被移动对象的top和left+(当前鼠标位置-初始鼠标位置) //得到对象当前位置 var top = sT + (nY - eY); var left = sL + (nX - eX); $(This).css({ left: left + 'px', top: top + 'px' }); //被移动对象的 上/下/左/右边框位置 var ThisT = top; var ThisB = top + h; var ThisL = left; var ThisR = left + w; //遍历所有的box对象在数组中的映射 for (var i = 0; i < arr.length; i++) { //声明一个新对象$obj=数组映射对象实体 var $obj = $box.eq(arr[i]); //判断是否是自己如果不是 if ($obj[0] != $(This)[0]) { //计算出目标对象$obj的中心点left值和top var mL = $obj[0].left + w / 2; var mT = $obj[0].top + h / 2; //中心碰撞检测 我是否框住了别人的中心点 if ((ThisB > mT && ThisT < mT) && (ThisR > mL && ThisL < mL)) { //如果确定了被碰撞对象,我们讲被移动对象的数组映射存储起来 var x = arr[moveIndex] //将被碰撞对象的left属性和top属性存储起来 var l = $obj[0].left; var t = $obj[0].top; //如果被移动目标对象位置在被碰撞目标对象之前 if (moveIndex < i) { //遍历从移动目标到碰撞目标之间的box的arr映射 //[0,1,2,3,4,5,6,7,8]=>[1,2,3,4,0,5,6,7,8] //遍历[1,2,3,4],确定好那些要动之后 for (var j = i; j >moveIndex; j--) { //依次让后一个box对象的js对象属性top和left=前一个的top和left console.log(arr[j]);//关联数组序号. $box.eq(arr[j])[0].top = $box.eq(arr[j-1])[0].top; $box.eq(arr[j])[0].left = $box.eq(arr[j-1])[0].left; //依次调用moveBox方法 moveBox($box.eq(arr[j])); } } else { //如果被移动对象在碰撞对象的前面 //[0,1,2,3,4,6,7,8]=>[5,0,1,2,3,4,5,6,7,8] //遍历[4,3,2,1,0],确定好那些要动之后 for (var j = i; j < moveIndex; j++) { console.log(arr[j]);//关联数组序号. //依次让需要移动的box的top和left=后一个的left和top $box.eq(arr[j])[0].top = $box.eq(arr[j + 1])[0].top; $box.eq(arr[j])[0].left = $box.eq(arr[j + 1])[0].left; moveBox($box.eq(arr[j])); } } //对数组arr进行splice操作删除掉数组对应被移动对象的映射moveIndex arr.splice(moveIndex, 1); //对数组arr进行splice在被碰撞目标映射i之后插入x //x是被移动对象的映射转存 arr.splice(i, 0, x); //将被移动对象的top属性和left属性 跟新为目标对象的top属性和left属性 $(This)[0].top = t; $(This)[0].left = l; //将被移动对象映射重置为被碰撞对象映射,为以后的移动碰撞做准备 moveIndex = i; console.log(arr,moveIndex); }; }; }; }).mouseup(function () { //抬起鼠标按键之后 //对被移动对象的css left和top根据更新后的left属性和top属性进行定位 $(This).stop().animate({ left: $(This)[0].left + 'px', top: $(This)[0].top + 'px', }).removeClass('on'); //解绑鼠标移动事件,解绑自身 $(this).off('mousemove'); $(this).off('mouseup'); }) }).find('img').mousedown(function (e) { //防止图片被拖拽时的默认事件 e.preventDefault(); }); //moveBox函数 根据传递的jq对象参数的对应的js对象的left属性和top属性来确定参数对象的css=定位位置 function moveBox($obj) { var l = $obj[0].left + 'px'; var t = $obj[0].top + 'px'; $obj.stop().animate({ left: l, top: t }) } </script> </body> </html>
图解
碰撞的情况
碰撞判断
为什么先存储碰撞对象的位置
拖拽
循环遍历的顺序
排列关系
相关文章推荐
- Jquery基础_弹出对话框_js的onload_jq的多次加载_Js和JQ对象转换_实例(一)
- JS和Jquery的对象互相转换
- JS和Jquery的对象互相转换
- js-jquery-对象与JSON字符串互相转换
- jQuery对象与js对象互相转换
- jQuery对象与js对象互相转换
- 使用JAXB实现JAVA对象和XML字符串的互相转换实例
- jQuery对象与js对象互相转换
- jQuery对象和DOM对象转换,解决jQuery对象不能使用js方法的问题
- jQuery系列01---jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别
- js对象, 数组 , json 互相转换【jquery.json-2.3.js下载】
- js对象和jq对象互相转换
- JQuery 选择器、过滤器及JQ对象和DOM对象的互相转换
- 使用JAXB实现JAVA对象和XML字符串的互相转换实例
- 使用jquery.json把js对象转换成json
- 浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
- 使用console.dir 快速概览Node.JS中对象实例的属性和方法
- js对象转换为json格式的jquery辅助类
- 使用stringstream对象实现类型转换实例