关于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的时候注意大小写兼容性问题，统一转大写判断或者统一转小写判断；