拖拽效果
来源：互联网 发布：算法 书籍 豆瓣评分 编辑：程序博客网 时间：2024/05/16 17:44
想想有半年没有更新自己的博客了，看着人烟稀少的一些阅读者确实比较难有更新博客的欲望，这段时间准备多整理一些我觉得还不错的代码，放到博客里自己作为一个备份。前段时间学了下react以及react-native，由于身边一个技术也没有，遇到问题只能死磕，导致整个效果都不理想，学了一个月才算入了半个门，学的都有点让我怀疑我在前端这条路上还能走多远。还是说说今天要分享的效果吧，拖拽和放置效果我想大家在工作中市场会用到，以前也经常会遇到，然后就想整理一个好点的拖拽和放置的代码，供自己以后取用，也可以让大家一起共享一下这些资源。
首先是DOM结构，DOM里会有一个图片缓冲池，会有一个拖拽和放置的区域，缓冲池里的区域也是可以拖拽和放置的。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"></head><body> <div class="list-logo" id="list-logo"> <ul> <li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li> </ul> </div> <div class="logo-holder"> <div class="logo-content" id="logo-content"> <div class="logo2" id="div-logo2"><img id="logo2" src="imgs/img2.jpg"></div> </div> <a href="javascript:void(0);" class="creat-logo" onclick="document.getElementById('upload-logo').click()">创建新logo</a> <input type="file" class="hidden" id="upload-logo"> </div><script src="js/script.js"></script></body></html>最开始的时候考虑的是将DOM元素也在js里进行生成，但是这样会限制js的拓展性，导致再布局上的限制，所以我还是直接用了在DOM里编写元素。
.list-logo{ float: left; width: 400px; height: 400px; margin: 100px 0 0 100px; border: 1px #000000 solid;}.list-logo ul{ width: 100%; height: 100%;}.list-logo ul li{ position: relative; float: left; height: 98px; width: 98px; border: 1px #666666 solid;}.list-logo ul li img{ position: absolute; width: 78px; height: 78px; top: 10px; left: 10px;}.logo-holder{ float: left; width: 210px; height: 400px; margin: 100px 0 0 100px; /*overflow-y: auto;*/ border: 1px #000000 solid; }.logo-holder .logo-content{ width: 100%; height: 370px; border-bottom: 1px #333333 solid;}.logo-holder .logo-content div{ position: relative; float: left; display: inline; height: 80px; width: 80px; margin: 10px 10px 10px 10px; border: 1px #666666 solid;}.logo-holder .logo-content div img{ position: absolute; width: 100%; height: 100%; left: 0; top: 0;}.creat-logo{ display: block; height: 24px; width: 100px; margin: 2px 0 0 10px; text-align: center; line-height: 24px; border: 1px #666 solid; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;}这是样式代码，只是个布局而已，没啥。
js里现在还存在一个bug，大家在运行的时候就会知道了，那个bug是我判断的时候出现的问题，也可能是我在修改的时候出现了问题，昨天我把js代码整理了一下，可能某个位置被我整理的出现了一些忘记整理的位置。
var dave_chen={ upload_logo:document.getElementById("upload-logo"), can_move:false, preposition:"", nowposition:"", target_eleid:"", init:function(){ if (this.upload_logo.attachEvent) { //IE 中 this.upload_logo.attachEvent('onchange',function(){ this.addlogo() }.bind(this),false); }else{ this.upload_logo.addEventListener("change",function(){ this.addlogo() }.bind(this),false); } if(document.attachEvent){ document.attachEvent("onmousedown",function(ev){ ev=ev||window.event; this.mousedownfunc(ev); }.bind(this)); document.attachEvent("onmousemove",function(ev){ ev=ev||window.event; this.mousemovefunc(ev); }.bind(this)); document.attachEvent("onmouseup",function(ev){ ev=ev||window.event; this.mouseupfunc(ev); }.bind(this)); }else{ document.addEventListener("mousedown",function(ev){ ev=ev||window.event; this.mousedownfunc(ev); }.bind(this)); document.addEventListener("mousemove",function(ev){ ev=ev||window.event; this.mousemovefunc(ev); }.bind(this)); document.addEventListener("mouseup",function(ev){ ev=ev||window.event; this.mouseupfunc(ev); }.bind(this)); } }, mousedownfunc:function(ev){ var target=ev.target||ev.srcElement; if(ev.preventDefault){ ev.preventDefault(); }else{ ev.returnValue=false; } if(target.id!=""&&target.id!=null&&target.id.indexOf("logo")>=0){ this.can_move=true; this.target_eleid=target.id; this.preposition={ "x":ev.pageX, "y":ev.pageY } } }, mousemovefunc:function(ev){ if(this.can_move){ if(ev.preventDefault){ ev.preventDefault(); }else{ ev.returnValue=false; } this.nowposition={ "x":ev.pageX, "y":ev.pageY }; var target_ele = document.getElementById(this.target_eleid); target_ele.style.top=(this.nowposition.y-this.preposition.y)+"px"; target_ele.style.left=(this.nowposition.x-this.preposition.x)+"px"; } }, mouseupfunc:function(ev){ if(ev.preventDefault){ ev.preventDefault(); }else{ ev.returnValue=false; } if(!this.can_move){ return; } this.can_move=false; var target_ele = document.getElementById(this.target_eleid); var logolist = document.getElementById("list-logo"); if(target_ele.className==""||target_ele.className==null){ this.check(target_ele,logolist,false); }else if(target_ele.className=="active"){ this.check(target_ele,logolist,true); } }, check:function(target_ele,logolist,flag){ if(this.nowposition!=""&&this.nowposition!=null){ var x_index = Math.floor((this.nowposition.x-100)/100); var y_index = Math.floor((this.nowposition.y-100)/100); console.log(x_index,y_index) if(1<=x_index&&x_index<4&&1<=y_index&&y_index<4){ var content=logolist.getElementsByTagName("ul")[0].getElementsByTagName("li")[(y_index-1)*4+x_index].innerText||logolist.getElementsByTagName("ul")[0].getElementsByTagName("li")[(y_index-1)*4+x_index].innerHTML; if(content!=""){ target_ele.style.top=""; target_ele.style.left=""; } else{ logolist.getElementsByTagName("ul")[0].getElementsByTagName("li")[(y_index-1)*4+x_index].appendChild(document.getElementById(this.target_eleid)); target_ele.style.top=""; target_ele.style.left=""; target_ele.className="active"; document.getElementById("div-"+this.target_eleid).style.display="none"; } }else{ if(!flag){ target_ele.style.top=""; target_ele.style.left=""; }else{ this.checkback(target_ele); } } } }, checkback:function(target_ele){ console.log('aaa'); var x_offset = this.nowposition.x-document.getElementById("div-"+this.target_eleid).parentNode.offsetLeft; var y_offset = this.nowposition.y-document.getElementById("div-"+this.target_eleid).offsetTop; console.log(document.getElementById("div-"+this.target_eleid).parentNode.offsetLeft,y_offset); if(0<=x_offset&&x_offset<210&&0<=y_offset&&y_offset<370) { document.getElementById("div-"+this.target_eleid).appendChild(target_ele); target_ele.style.top=""; target_ele.style.left=""; target_ele.className=""; document.getElementById("div-"+this.target_eleid).style.display="block"; }else{ target_ele.style.top=""; target_ele.style.left=""; } }, addlogo:function(){ var img_src=this.upload_logo.value; var img_index = img_src.indexOf("img"); var img_relsrc="imgs/"+img_src.substring(img_index); if(!!window.ActiveXObject || "ActiveXObject" in window){ img_relsrc="imgs/"+img_src.substring(img_src.indexOf("imgs")).substring(img_src.substring(img_src.indexOf("imgs")).indexOf("\\")+1); } var add_div=document.createElement("div"); var add_img=document.createElement("img"); add_img.src=img_relsrc; add_img.id="logo"+img_src.substring(img_src.indexOf(".")-1,img_src.indexOf(".")); var all_imgs=document.getElementsByTagName("img"); var img_length = all_imgs.length; var reapeat_num=0; for(var i=0;i<img_length; i++){ if(all_imgs[i].id==add_img.id){ reapeat_num++; } } if(reapeat_num>0){ alert("this logo has exit"); }else{ add_div.id="div-"+add_img.id; add_div.appendChild(add_img); document.getElementById("logo-content").appendChild(add_div); } }};dave_chen.init();我做了几层判断，第一层就是上传图片，会进行重复判断，已经存在的话就不能在上传了，另一层也是去重，放置的区域是同一个区域的时候也不能放置成功，然后就是对拖拽和放置的判断，判断放置的区域是哪一个区域,如果是图片存储池，则将图片放回，如果是放置区域，则将图片放在该放置的区域。
这些方法都算是比较基础的，但是也是比较难以整合在一起的，所以还算是比较麻烦的一个效果，有兴趣的小伙伴可以复制源码测试一下还有一点可以提出来，这里我就不透露了，所以整个源码还有很多可以优化的空间，有兴趣的可以自行进行优化处理。
1 0
- jQuery拖拽效果和切割效果
- 拖拽效果
- Android拖拽效果
- 拖拽效果
- jquery--拖拽效果
- ExtJS拖拽效果
- GridView拖拽效果
- div拖拽效果
- 鼠标拖拽效果
- tree拖拽效果
- DIV 拖拽效果
- 鼠标拖拽效果
- JS-拖拽效果
- 拖拽效果集
- 拖拽效果
- javascript拖拽效果
- HTML 拖拽效果
- HTML5拖拽效果
- 欢迎使用CSDN-markdown编辑器
- 视频格式转换方法之264、avi、YUV420P
- String和StringBuffer的区别
- 检查浏览器视口大小
- ACM-2010 水仙花数
- 拖拽效果
- 内存读写
- UNPv1第二十一章：带外数据
- centos7.1 安装 svnmanager1.10
- cnn中权值共享理解
- Cluster vs Clustering
- 《精通CSS：高级Web标准解决方案》学习过程--V
- LintCode:最长回文子串
- LinearLayout之初级学习 （二） ScrollView
