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