자바스크립트 드래그 채택완료
Copy
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
위의 코드는 구글에서 가져온것입니다.
이 코드를 응용해서 아래 사진의 값을 변경하려고합니다.
A를 B자리로 드래그하면 B는 A자리로 이동시키려고하는데
위의 소스코드로는 처음 드래그한것을 이동시키는것만됩니다.
그래서 저는 처음 드래그를 할때 아이디값을 변수에 저장해두고 드롭이벤트가 발생하는시점에서
저장해둔 아이디값을 이용해 값을 변경하려고 아래의 소스코드처럼 작성하였지만
결과는 제가 원하는대로 되지않습니다..ㅠㅠ 어디가 문제인걸까요..?
Copy
var id = undefined;
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("data1", ev.target.id);
id = ev.target.id;
}
function drop(ev)
{
ev.preventDefault();
ev.dataTransfer.setData("data2", ev.target.id);
var data = ev.dataTransfer.getData("data1");
ev.target.appendChild(document.getElementById(data));
document.getElementById(id).appendChild(ev.dataTransfer.getData("data2"));
}
답변 1개
kkama96년 전
이런경우이미지가 씌워진 div 의 위치를 바꾸는게 편합니다. 여러개있을때 적용하기도 쉽고요 .
https://jqueryui.com/sortable/ 이거 참조해보세요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인