자바스크립트 드래그
본문
<script>
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));
}
</script>
위의 코드는 구글에서 가져온것입니다.
이 코드를 응용해서 아래 사진의 값을 변경하려고합니다.
A를 B자리로 드래그하면 B는 A자리로 이동시키려고하는데
위의 소스코드로는 처음 드래그한것을 이동시키는것만됩니다.
그래서 저는 처음 드래그를 할때 아이디값을 변수에 저장해두고 드롭이벤트가 발생하는시점에서
저장해둔 아이디값을 이용해 값을 변경하려고 아래의 소스코드처럼 작성하였지만
결과는 제가 원하는대로 되지않습니다..ㅠㅠ 어디가 문제인걸까요..?
<script>
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"));
}
</script>
답변을 작성하시기 전에 로그인 해주세요.