JQuery - 버튼을 누를 때마다 새로운 draggable div를 만드는 방법

Question

JQuery를 사용하여 버튼을 누르고 드래그 가능한 div를 만들 수 있어야합니다. 이것은 내가 사업부가 배치 할 컨테이너와 새로운 사업부를 만들어야합니다 버튼입니다

내가 몸

<style> 
     #draggable { 
      width: 100px; 
      height: 100px; 
      background: #ccc; 
     } 
    </style> 

에 다음과 같은 스타일을 가지고 다음과 같이 내 코드입니다. 페이지로드시 div를 만들면 드래그 가능하며 예상대로 작동합니다.

<container id="area"> 
     <a class="btn btn-primary" id="create_block">Create</a> 
     <div id="draggable">Draggable</div> 
    </container> 

나는 다음 버튼을 클릭하고 내가 이해에서, ID = "드래그"드래그로 모든 것을 만들고, 코드에 드래그를 만들어 몸에이 스크립트를 가지고있다.

<script> 
     $("#create_block").click(function() { 
      $('<div/>').attr({ 
       'id' : 'draggable' 
      }).appendTo("#area"); 
     }); 

     $('#draggable').draggable(); 
    </script> 

버튼을 클릭하면 정확하게 스타일이 지정된 div가 생성되지만 드래그 할 수 없습니다.

나는 이것으로 무슨 일을하는지 잘 모르겠다. 비슷한 일에 대한 몇 가지 다른 예를 살펴 봤지만 이것이 효과가있는 것으로 보입니다. 내가 뭘 놓치고 있니? 부트 스트랩을 사용하고 있지만 다른 프레임 워크는 없습니다.

어떻게 새 div를 만들 수 있으며, 다른 모든 것은 버튼을 눌러서 만들 수 있습니까, 드래그 가능합니까?

Answer 1

당신은 :)

$("#create_block").click(function() { 
$('<div/>').attr({ 
    'class': 'draggable' 
}).draggable().appendTo("#area"); 
    //initiate draggable on every new created elements 
}); 


//Don't need this part if the draggable elements are only created on click 
$('.draggable').draggable(); // initiate the first draggable element that you already have 

Answer 2

처음에는 직관적이지는 않지만 귀하의 $('#draggable').draggable() 전화는 자신이 생각하는대로 행동하지 않습니다. 이 말은 "ID가 draggable 인 모든 요소를 ​​드래그 가능하게"하는 것은 아닙니다.

페이지에서 #draggable과 일치하는 모든 요소를 ​​반환하는 선택을 수행합니다. 그런 다음 각 요소에 draggable이라는 메서드를 적용합니다. 그 시점에서 실행이 완료됩니다. 지속적인 청취자는 없습니다.

새 요소를 만들 때 원한다면 드래그 할 수 있도록해야합니다. (새 요소의 생성에 체인에 유의 .draggable()) 해당 요소가 처음 존재하지 않았기 때문에

<script> 
    $("#create_block").click(function() { 
     $('<div/>').attr({ 
      'id' : 'draggable' 
     }).appendTo("#area").draggable(); 
    }); 

    $('#draggable').draggable(); 
</script> 

당신이 그것을 첫 번째 이동 주위에 포함되지 않았습니다이 드래그했다 : 이런 식으로 뭔가.

또한 다소 관련이 없지만 두 번째 추가하기 전에 첫 번째 draggable div를 제거하지 않는 한 요소의 고유 ID를 선택하거나 id 대신 draggable 클래스를 설정해야합니다. ID는 고유해야하며 페이지의 요소 식별자는입니다. 동일한 ID를 가진 요소가 여러 개있는 경우 문제가 발생합니다.