想想有半年没有更新自己的博客了,看着人烟稀少的一些阅读者确实比较难有更新博客的欲望,这段时间准备多整理一些我觉得还不错的代码,放到博客里自己作为一个备份。前段时间学了下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();
我做了几层判断,第一层就是上传图片,会进行重复判断,已经存在的话就不能在上传了,另一层也是去重,放置的区域是同一个区域的时候也不能放置成功,然后就是对拖拽和放置的判断,判断放置的区域是哪一个区域,如果是图片存储池,则将图片放回,如果是放置区域,则将图片放在该放置的区域。
这些方法都算是比较基础的,但是也是比较难以整合在一起的,所以还算是比较麻烦的一个效果,有兴趣的小伙伴可以复制源码测试一下还有一点可以提出来,这里我就不透露了,所以整个源码还有很多可以优化的空间,有兴趣的可以自行进行优化处理。