jQuery可拖動克隆不留在它丟棄的地方

Question

我正在使用jQuery UI從div克隆元素，在另一個div處拖動和釋放。 我第一次放棄克隆的元素時，它會改變位置並遠離釋放的位置。但是，它仍然可以拖延，並保持在其他時間必須處於的位置。

$(document).ready(function(){ 
    var counter = 1; 
    $(".drag").draggable({ 
     revert: "invalid", 
     helper: 'clone', 
     cursor: "crosshair", 
     containment: 'frame', 
     stop: function(event, ui) { 
      var cloned = $(ui.helper).clone(); 
      cloned.attr("id", "clonedElem" + counter); 
      var pos = $(ui.helper).offset(); 

      var draggableOffset = ui.helper.offset(), 
       droppableOffset = $(this).offset(), 
       left = draggableOffset.left - droppableOffset.left, 
       top = draggableOffset.top - droppableOffset.top; 

      cloned.css({ 
       "position": "absolute", 
       "left": left, 
       "top": top 
      }); 

      cloned.attr("visible", "true"); 

      cloned.draggable({ 
       containment: 'parent', 
       stop:function(ev, ui) { 
        console.log("aqui"); 
       } 
      }); 
      $("#frame").append(cloned); 
      counter++; 
     } 
    }); 

    $("#frame").droppable({ 
     accept: ".drag", 
    }); 
}); 

和HTML：

<div id="wrapper"> 
    <ul id="options" class="list-group col-md-1"> 
     <li class="list-group-item"> 
      <div id="drag1" class="drag ui-draggable"> 
       <h1> 
        <span class="glyphicon glyphicon-fire"></span> 
       </h1> 
      </div> 
     </li> 
     <li class="list-group-item"> 
      <div id="drag2" class="drag ui-draggable"> 
       <h1> 
        <span class="glyphicon glyphicon-magnet"></span> 
       </h1> 
      </div> 
     </li> 
     <li class="list-group-item"> 
      <div id="drag3" class="drag ui-draggable"> 
       <h1> 
        <span class="glyphicon glyphicon-globe"></span> 
       </h1> 
      </div> 
     </li> 
     <li class="list-group-item"> 
      <div id="drag4" class="drag ui-draggable"> 
       <h1> 
        <span class="glyphicon glyphicon-briefcase"></span> 
       </h1> 
      </div> 
     </li> 
     <li class="list-group-item"> 
      <div id="drag5" class="drag ui-draggable"> 
       <h1> 
        <span class="glyphicon glyphicon-tower"></span> 
       </h1> 
      </div> 
     </li> 
     <li class="list-group-item"> 
      <div id="drag6" class="drag ui-draggable"> 
       <h1> 
        <span class="glyphicon glyphicon-tree-deciduous"></span> 
       </h1> 
      </div> 
     </li> 
    </ul> 
    <div id="frame" class="col-md-11 ui-droppable" style="border: 2px #000 solid; height: 558px;"> 
    </div> 
</div> 

我使用引導3到CSS。

Answer 1

你的邏輯很好，但你正在申請錯誤的事件。您使用$(this)設置droppableOffset實際上是draggable，因爲您在stop事件draggable上調用它。它應該在droppable的drop事件中。此外，避免使用top，因爲它是window對象的屬性，所以它會產生不需要的行爲。這應該工作：

$(document).ready(function(){ 
    var counter = 1; 
    $(".drag").draggable({ 
     revert: "invalid", 
     helper: 'clone', 
     cursor: "crosshair", 
     containment: 'frame', 

    }); 

    $("#frame").droppable({ 
     accept: ".drag", 
     drop: function(event, ui) { 
      var cloned = $(ui.helper).clone(); 
      cloned.attr("id", "clonedElem" + counter); 
      var pos = $(ui.helper).offset(); 

      var draggableOffset = ui.helper.offset(), 
       droppableOffset = $(this).offset(), 
       left = draggableOffset.left - droppableOffset.left, 
       thisTop = draggableOffset.top - droppableOffset.top; 

      cloned.css({ 
       "position": "absolute", 
       "left": left, 
       "top": thisTop 
      }); 

      cloned.attr("visible", "true"); 

      cloned.draggable({ 
       containment: 'parent', 
       stop:function(ev, ui) { 
        console.log("aqui"); 
       } 
      }); 
      $("#frame").append(cloned); 
      counter++; 
     } 
    }); 
}); 

小提琴：https://jsfiddle.net/vv6rzc4L/