拖动时奇怪的位置

Question

我在此网站（http://www.authorcode.com/swap-elements-when-drag-one-onto-another-using-jquery-ui/）上找到了一个用于拖动和交换的功能，我进行了一些修改，但是当我将项目A或D拖到一个奇怪的位置时，我遇到了一个问题，因为我更改了边距，拖动时如何更改这些项目的位置？

代码是这样的：

$(function() {
        $("#dragdiv li,#dropdiv li").draggable({
            appendTo: "body",
            helper: "clone",
            revert: "invalid"
        });

        initDroppable($("#dropdiv li,#dragdiv li"));
        function initDroppable($elements) {
            $elements.droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-drop-hover",
                accept: ":not(.ui-sortable-helper)",

                over: function(event, ui) {
                    var $this = $(this);
                },
                drop: function(event, ui) {
                    var $this = $(this);
                    var linew1 = $(this)

                    var li1 = $('<li id="'+linew1.attr('id') +'">' + ui.draggable.text() + '</li>')
                     linew1 = $(this).after(li1);

                    var linew2 = $(ui.draggable)
                    var li2 = $('<li id="'+linew2.attr('id') +'">' + $(this).text() + '</li>')
                     linew2 = $(ui.draggable).after(li2);

                    $(ui.draggable).remove();
                    $(this).remove();

                    initDroppable($("#dropdiv li,#dragdiv li"));
                    $("#dragdiv li,#dropdiv li").draggable({
                        appendTo: "body",
                        helper: "clone",
                        revert: "invalid"
                    });
                }
            });
        }
      });

.ui-draggable-dragging{
      text-align: center;
      width:200px;
      height: 15px;
      color:black;
    }
    .ui-draggable, .ui-droppable{
      list-style:none;
    }
    #dragdiv li,#dropdiv li{
      border: 2px solid rgb(0,0,0);
      text-align: center;
      color: black;
      width:180px;
      height: 15px;
    }
    #dragdiv li{
      margin-bottom: 40px;
    }
    #dropdiv li{
      display: inline-block;
    }
    #allItems, #Ul1{
      padding: 0px;
      margin: 0;
    }
    #dragdiv{
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top:-187px;
      margin-left:-90px;
      width:204px;
      height:374px;
    }
    #dropdiv{
      position: absolute;
      left: 50%;
      top: 50%;
      width:500px;
      height:19px;
      margin-left: -250px;
      margin-top: -9.5px;
    }
    #item_d{
      margin-top:100px;
    }
    #item_h{
      margin-left: 125px;
    }
    #dragdiv li:hover, #dropdiv li:hover{
      border:2px solid #fff;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
			  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
			  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
			  crossorigin="anonymous"></script>
<div id="dragdiv" style="z-index:2;">
      <ul id="allItems" >
          <li id="item_a">Item A</li>
          <li id="item_b">Item B</li>
          <li id="item_c">Item C</li>
          <li id="item_d">Item D</li>
          <li id="item_e">Item E</li>
          <li id="item_f">Item F</li>
      </ul>
    </div>
    <div id="dropdiv" style="z-index:2;">
       <ul id="Ul1" >
        <li id="item_g">Item G</li>
        <li id="item_h">Item H</li>
      </ul>
    </div>