问题已经解决,重刷新页面 <!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>
问题已经解决,重刷新页面