拖拽用jquery删除两个列表

Question

我试图制造自己的拖拉机drop plugin。 我从列表中选取元素，如何为该元素保留相同的CSS？现在，这个元素是半隐形的。我该如何解决这个问题？

这是我的代码：

＆＃13;

＆＃13;

  $("#dropzone").on("dragstart", 'li', function(e) {
    $(this).addClass('ccc');
    console.log($(this).attr('id'));
    e.originalEvent.dataTransfer.setData('clip', $(this).attr('id'));
  });

  $("#dropzone").on("dragenter", '.droptarget', function(e) {

    e.stopPropagation();
    e.preventDefault();
    return true;
  });
  $("#dropzone").on("dragleave", 'li', function(e) {});

  $("#dropzone").on("dragover", '.droptarget', function(e) {
    e.stopPropagation();
    e.preventDefault();
    return true;
  });

  $("#dropzone").on("drop", '.droptarget', function(e) {
    e.stopPropagation();
    e.preventDefault();

    $(this).append($('#' + e.originalEvent.dataTransfer.getData('clip')));
  });

＆＃13;

  ul {
    list-style: none;
  }
  
  li {
    background-color: #0016b0;
    margin: 5px;
  }
  
  li:hover {
    cursor: move
  }
  
  .ccc {
    background-color: #0016b0;
  }
  
  .droptarget {
    float: left;
    width: 400px;
    min-height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropzone">
  <ul class="droptarget">
    <li draggable="true" id="dragtarget1">
      Drag me1!
    </li>
    <li draggable="true" id="dragtarget2">
      Drag me2!
    </li>
    <li draggable="true" id="dragtarget3">
      Drag me3!
    </li>
  </ul>

  <ul class="droptarget">

  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

的 JSFiddle

谢谢！