첨부한 html파일을 실행하여 소스부분을 타겟위로 드래그 & 드롭해 보세요

<div id=sourceArea style='width:200;height:100;background-color:#eeeeee'
 ondragstart="drag_start()"
 onmousemove="drag_able()"
>
소스
<br><br>
<input type=text name=txt> <input type=button name=bttn value=클릭>
</div>

<br><br>
<div id=targetArea style='width:200;height:100;background-color:#eeeeee'
 ondragover="drag_over()"
 ondragenter="drag_enter()"
 ondragleave="drag_leave()"
 ondrop="drop_finish()"
>
타겟
</div>

<br><br>
<fieldset style=padding:5;width:200;height:100>
<legend>결과1</legend>
<div id=resultArea1></div>
</fieldset>

<fieldset style=padding:5;width:200;height:100>
<legend>결과2</legend>
<div id=resultArea2></div>
</fieldset>

<script>
function drag_able() {
 if (window.event.button == 1)
  document.all.sourceArea.dragDrop();
}

function drag_start() {
 window.event.dataTransfer.setData('text', sourceArea.innerHTML);
}

function drag_enter() {
 window.event.srcElement.style.backgroundColor = 'pink';
 drag_over();
}

function drag_over() {
 window.event.returnValue = false;
}

function drag_leave() {
 window.event.srcElement.style.backgroundColor = '#eeeeee';
 drag_over();
}

function drop_finish() {
 window.event.srcElement.style.backgroundColor = '#eeeeee';
 document.all.resultArea1.innerHTML = window.event.dataTransfer.getData('text');
 document.all.resultArea2.innerText = window.event.dataTransfer.getData('text');
}

</script>

ondragstart : 마우스 왼쪽 버튼을 클릭한 상태에서 어떤 객체를 드래그하기 시작하는 순간 발생한다.
ondrag : ondragstart 이후 드래그 하는 동안 계속 발생한다.
ondragenter : ondrag하는 동안 드롭시킬 적절한 타겟에 해당 객체가 들어가는 순간 발생한다.
ondragover : ondragenter 이후 드래그 하는 동안 계속 발생한다.
ondragleave : 드롭시킬 타겟에서 해당 객체가 벗어나는 순간 발생한다.
ondragend : 드래그하던 해당 객체를 적절한 드롭시킬 타겟에 떨어뜨리든 못하든 마우스 왼쪽 버튼을 해제하는 순간 발행한다. 즉 드롭을 성공시켰는지 여부에 상관 없이 드래그를 멈추는 순간 발생한다.
ondrop : 드래그하던 해당 객체를 성공적으로 드롭시킬 타겟에 떨어뜨렸을 때 발생한다.