关于HTML 5 拖放 问题【诚求好心人】

Question

【问题：】 现在可以待排班人员和每个星期值班人员可以相互拖放。但是 如果将<span>拖到 某一个<span>上面后 这个被拖动的就插入到里面了。怎么设置可以避免发生！================js部分 ========================== <!-- 拖拽 star-->  <script type="text/javascript">    function allowDrop(ev)      {        ev.preventDefault();      }    function drag(ev)      {        ev.dataTransfer.setData("Text",ev.target.id);      }    function drop(ev)      {        ev.preventDefault();        var data=ev.dataTransfer.getData("Text");        ev.target.appendChild(document.getElementById(data));      }       </script> <!-- 拖拽 end--> ================html 部分 （大致意思）==============================待排班人员====      <div class="duty-box" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">            <span  id="drag1"  draggable="true" ondragstart="drag(event)">张1</span>  </div>====星期一====  <div class="duty-box"  id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">         <span  id="drag2"  draggable="true" ondragstart="drag(event)">张2</span>   </div> ====星期二====  <div class="duty-box"  id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">         <span  id="drag3"  draggable="true" ondragstart="drag(event)">张3</span>   </div>

Answer 1

ev.target.appendChild之前判断ev.target的nodeName，如果是span的话就添加在span的parentNode的div上，注意取nodeName的时候注意大小写兼容性问题，统一转大写判断或者统一转小写判断；