DnD拖拽，自制地图拖拽定位

演示及源码实例地址
BUG描述：
拖拽滞留在源区域，会产生新的元素
在目标区域再次拖拽，如何禁止源区域产生新的元素
ondragstart 这个方法里面为何有appendChild
drop的时候判断下event.target，如果是目标区域就什么都不干
问题已经解决，重刷新页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css">
<style>
#main{
    margin:40px auto;
    width:900px;
    height:400px;
}
#target{
    float:left;
    width:800px;
    height:400px;
    background:url(map.png);

}
#source{
    width: 100px;
    float: left;
    text-align: center;
    height: 400px;
    overflow-y:scroll;
}
.source-icon{
    color:gray;
    cursor:move;
}
.source-icon .title{
    font-size:x-small;
    color:black;
}

#target .source-icon{
    color: blue;
    margin: 10px 0px;
    font-size: x-small;
    height: 60px;
    line-height: 22px;
    font-weight:bold;
}
#target .title{
    color:blue;
}
.target{
    float:left;
    width:80px;
    height:80px;
    line-height:80px;
    border:1px #a2a2a2;
    text-align: center;
    box-sizing: border-box;
    border-style: dashed;
}
#source-create{
    font-size:x-small;
    line-height:15px;
}

textarea.title{
    border:none;
    text-align: center;
    word-break:break-all;
    background:none;
    resize:none;
    overflow:hidden;
}
#source button,#source span{
    margin:10px 0px;
}

textarea::-webkit-input-placeholder{
    color:gray;
}


</style>
</head>
<body>
<div id="main">
    <div id="source" ondragover="allowDrop(event)" ondrop="drop(event)">
            <button    id="create">创建景点</button>
        <span id="source-icon" class="source-icon fa fa-map-pin" title="直接输入景点名称，也选中按Delete删除"><br /><textarea placeholder="直接输入景点" class="title" cols="3" rows="2" maxlength="8"/></textarea></span>
        </div>
        <div id="target"></div>
    </div>
    </body>
    <script>
var sourceIcon = document.getElementsByClassName("source-icon");        //拖放源
var target = document.getElementById("target");  //大目标范围
var create = document.getElementById("create");        //创建
var sNum = 0;  //设置拖拽源的值为0
var textarea = document.getElementsByTagName("textarea");
create.onclick = function (){                                    //点击创建函数
    make();
};

for(var i = 1;i<=50;i++){                      //创建拖拽目标的定位宫格
    var tr = document.createElement("div");
    tr.className = "target";
    tr.id = "target"  +  i;
    tr.ondragover = function (event){           //允许拖拽设置
        allowDrop(event);
    };    
    tr.ondrop = function (event){                                //拖拽动作
        drop(event);
    };
    target.appendChild(tr);
};
sourceIcon[0].draggable = true;                      //初始化拖拽
onMake();
function onMake(){
for(var i in sourceIcon){
sourceIcon[i].index = i;
sourceIcon[i].ondragstart = function dragstart(event){
    drag(event);                                                        //拖拽准备
};
textarea[i].onfocus = function (){
    this.placeholder="";
}
sourceIcon[i].onkeydown =  function (){
        if(event.keyCode==46){                                        //按delete删除本元素
        this.parentElement.removeChild(this);
        };
    };
};
};

function make(){                                                    //创建元素
    sNum+=1;
    var source = document.createElement("span");
    source.id="source-icon"+sNum;
    source.title = "选中按Delete删除";
    source.className="source-icon fa fa-map-pin";
    source.innerHTML ="<br /><textarea placeholder=\"直接输入景点\" class=\"title\" cols=\"3\" rows=\"2\" maxlength=\"8\"/>";
    source.draggable = true;
    document.getElementById("source").appendChild(source);
    onMake();                                                            //回调遍历函数    
};

function drag(ev){                                                        //拖拽准备
    ev.dataTransfer.setData("text",event.target.id);
}     

function allowDrop(ev) {                 //允许拖拽，清理默认
    ev.preventDefault();
}

function drop(ev) {                                            //拖拽动作实现并完成数据接收    
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
    </script>
    </html>
【热门文章】