drag and drop 에 추가
관련링크
본문
위 주소에서 1,2,3,4,5,6 번을 드래그 앤 드롭으로 하면 순서를 변경할수 있습니다.
그런데 아래 추가 버튼을 누르면 7번 이 추가가 되는데요.
div 가 추가가 되면 7번 div 는 드래그 앤 드랍이 안되네요..
document.createElement('div'); // is a node
로 추가를 해준건데요 안되는 이유는 뭘까요?
답변 2
z div가 새로 생성되었으니 여기에도 새로 이벤트를 달아줘야합니다
아래의 부분을
$(document).on('click','#agdfgadf', function(){
var z = document.createElement('div'); // is a node
z.innerHTML = '7. 추가한 내용';
z.className = 'draggable';
z.setAttribute('draggable', true);
$(".container").append(z);
});
아래처럼 바꿔보세요
$(document).on('click','#agdfgadf', function(){
var z = document.createElement('div'); // is a node
z.innerHTML = '7. 추가한 내용';
z.className = 'draggable';
z.setAttribute('draggable', true);
$(".container").append(z);
z.addEventListener('dragstart', () => {
z.classList.add('dragging');
});
z.addEventListener('dragend', () => {
z.classList.remove('dragging')
});
});
감사합니다. 바로 해결이 됩니다.
추가를 클릭하면 div 는 추가가 되는데...
el.addEventListener('dragstart', () => {
el.classList.add('dragging');
});
el.addEventListener('dragend', () => {
el.classList.remove('dragging')
});
위 소스가 적용이 안되서 그런거군요...
저는
<script>
에서
(() => {
이렇게 시작하는 스크립트는 처음봅니다.
insertBefore' on 'Node': parameter 1 is not of type 'Node'
스크립트 오류가 발생되는 부분으로 보여집니다.
오류 수정방법을 못 찾겠습니다.
혹시 고수님들의 조언 부탁드립니다.
