jquery ui 中的 drop 函数后无法在 droppable div 中拖动元素

Question

我正在开发拖放功能，我有图像，我正在拖放并复制它，我可以放下该图像，但无法在放下后拖动以更改其位置元素，我在这里添加了我所有的代码，谁能帮我解决这个问题？

            $(".draggable").draggable({helper:'clone'});  
           
            $(".droppable").droppable({
                accept: ".draggable",
                drop: function (event, ui) {
                    
                    $(".center-div").append($(ui.draggable).clone());
                    
                }
            });

.center-div {
    width: 80%;
    height: 80%;  
    background: grey;
    position: absolute;
    top:100px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.line{
    height: 47px;
    border-bottom: 1px solid black;
    position: absolute;
}
.line-complete:hover {
    //border: 1px solid white !important;
    //background: white !important;
    //padding: 0px;
    //font-size: 1.2em;
    cursor: pointer;
}
.line-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 50px;
    color: #fff;
    line-height: 5px;
    text-align: center;
    background: red;
    margin-left: -3px !important;
    margin-top: -5px !important;
    z-index: 9999;
}


.draggable { width: 70px; height: 70px; padding: 0.5em; float: left; margin: 10px 10px 10px; z-index: 999999; }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
  
  
  <div class="container">
      
     <div class="row">
  <div class="col-md-12">
      <div id="floorplan_images">
          <img class="draggable" src="http://hfpbuilder-dev.serverdatahost.com/images/vessel_drum.png" style="z-index:9999" width="50" height="50">
        </div> 
  </div>    
     </div>
     
 </div>
 <div class="center-div ui-widget-header droppable"></div>

Answer 1

您可以像这样更改放置方法：

$(".droppable").droppable({
  accept: ".draggable",
  drop: function(event, ui) {
    var draggedElement = $(ui.draggable).clone();
    draggedElement.removeClass('draggable');
    $(".center-div").append(draggedElement);
    draggedElement.draggable();
  }
});

Online Demo (jsFiddle)

jquery ui 中的 drop 函数后无法在 droppable div 中拖动元素

Not able to dragged elemenet in droppable div after drop function in jquery ui

jquery

jquery-ui

jquery-ui-draggable