拖动排序，利用html的数据交换

html段

  <div class="fly-panel "  ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
我是第一个模块内容
</div>

  <div class="fly-panel "  ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
我是第二个模块内容
</div>
  <div class="fly-panel "  ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
我是第三个模块内容
</div>

 

js段

<script>
  var ta1 = "";
     var srcdiv = null;  //申明srcdiv
     function allowDrop (ev) {
       ev.preventDefault(); //取消事件默认动作
     };
     function drag (ev, divdom) {
       ev.dataTransfer.dropEffect="move";
       srcdiv = divdom;//将获取的被拖动元素fly-panel元素赋给变量fly-panel
       ta1 = divdom.innerHTML;//将被拖动的元素fly-panel中的HTML元素赋给变量ta1
     };
     function drop (ev, divdom) {
        ev.preventDefault();
        if (srcdiv != divdom) {
          srcdiv.innerHTML = divdom.innerHTML;//将被替换位置的fly-panel中的HTML元素赋给被拖动的元素fly-panel中
          divdom.innerHTML = ta1; //将ta1中的元素赋给被替换位置的fly-panel中
      };
     };
 </script>