title: HTML5: Reorder the children li of ul by drag and drop, the borders between li elements are missed
body: <p>The original list as below:
  <img src="https://i.stack.imgur.com/2QsAA.png" alt="Normal"></p>
  
  <p>After drag and drop, the pic as below:
  <img src="https://i.stack.imgur.com/H1qOz.png" alt="Error"></p>
  
  <p>The item 1 and item 2 are connected, how to fix this issue?
  My intent is to reorder the list items by drag and drop. Thanks in advance.
  Here is the code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;example&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
          .main-area {
              margin-left: 10%;
              margin-right: 10%;
              min-width: 600px;
          }
  
          ul {
              padding-left: 0;
              text-align:center;
          }
  
          li {
              word-break: break-all;
              display: inline-block;
              width: 400px;
              height: 200px;
              margin-bottom: 3px;
              border-radius: 3px;
              box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script&gt;
          // on source element
          function dragstart (ev) {
              ev.dataTransfer.effectAllowed = "move";
              ev.dataTransfer.setData("srcId", ev.currentTarget.id);
              ev.dataTransfer.setDragImage(ev.currentTarget, 0, 0);
          }
          function dragend(ev) {
              ev.dataTransfer.clearData("srcId");
          }
  
          // on target element
          function dragover(ev) {
              ev.preventDefault();
          }
          function drop(ev) {
              var srcId = ev.dataTransfer.getData("srcId");
              var srcObj = document.getElementById(srcId)
              if(srcObj != ev.currentTarget){
                  var list = document.getElementById('list')
                  list.insertBefore(srcObj, ev.currentTarget);
              }
          }
      &lt;/script&gt;
      &lt;div id='main-area'&gt;
          &lt;ul id='list'&gt;
              &lt;li id='1' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)"&gt;
                  111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
              &lt;/li&gt;
              &lt;li id='2' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)"&gt;
                  222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
              &lt;/li&gt;
              &lt;li id='3' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)"&gt;
                  333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
              &lt;/li&gt;
              &lt;li id='4' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)"&gt;
                  444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>