附加后为什么div不可拖动？

Question

HTML

p:importConstants

JQuery的

<div class="simulator"></div>
<div class="1D-Kinematics">
    <button class="square"> Summon Square </button>
</div>

CSS

$(document).ready(function () {
    $("#draggable").draggable(); // Dragging Function
    $(".square").click(function(){
        $('.simulator').append($('<div id="draggable" class="draggable-entity">')); 
        $('.simulator div').html("");
        // should create a draggable colored div in .simulator
    });    
});

会发生什么情况，会出现一个彩色的盒子，但它不可拖动。如果我明确地在html中放置了一个带有该ID和类的div，它可以工作并且是可拖动的。

Answer 1

您需要附加draggable（）功能

$("#draggable").draggable();

将div附加到DOM

之后

＆＃13;

＆＃13;

$(document).ready(function() {

  $(".square").click(function() {
    $('.simulator').append($('<div id="draggable" class="draggable-entity">'));
    $('.simulator div').html("");
    $("#draggable").draggable(); // Dragging Function

  });

});

＆＃13;

.draggable-entity {
  height: 200px;
  width: 200px;
  border: 2px solid black;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="simulator"></div>
<div class="1D-Kinematics">
  <button class="square">Summon Square</button>
</div>

＆＃13;

＆＃13;

＆＃13;