SOURCE

var data = {
  index: 0,
  dragging: false
};

var lis = document.querySelectorAll('li');

for (var i = 0; i < lis.length; i++) {
  lis[i].index = i;
  //绑定事件
  lis[i].ondragstart = function(e) {
    // 写入数据
    e.dataTransfer.setData('Text', this.index);
    data = {
      index: this.index,
      dragging: true
    };

    this.classList.add('dragging');
    this.classList.add('hide');
  }

  lis[i].ondragend = function() {
    this.classList.remove('dragging');
    this.classList.remove('hide');
    data = {
      index: 0,
      dragging: false
    };
  }

  //拖入的事件
  lis[i].ondragenter = function(e) {}

  lis[i].ondragover = function(e) {
    e.preventDefault();
    if (data.dragging) {
      var index = data.index;
      music.insertBefore(lis[index], this);
    }
  }

  lis[i].ondrop = function(e) {
    var index = e.dataTransfer.getData('text');
    music.insertBefore(lis[index], this);
  }

}

<ul id="music">
  <li class="item" id="1" draggable="true">
    A
  </li>
  <li class="item" id="2" draggable="true">
    B
  </li>
  <li class="item" id="3" draggable="true">
    C
  </li>
  <li class="item" id="4" draggable="true">
    D
  </li>
  <li class="item" id="5" draggable="true">
    E
  </li>
  <li class="item" id="6" draggable="true">
    F
  </li>
  <li class="item" id="7" draggable="true">
    G
  </li>
</ul>

 * {
   list-style: none;
 }
 
 .item {
   height: 40px;
   width: 200px;
   color: black;
   border: solid 1px #ddd;
 }
 
 .dragging {
   border: dashed 4px #ddd;
 }
 
 .hide {
   border: dashed 1px #ddd;
   color: white;
 }