Dùng chuột kéo thả đối tượng

Nhấn đồng thời giữ chuột vào bức ảnh rồi kéo sang bên đối diện

Xem ví dụ

<style type="text/css">
#div1ev, #div2ev
{float:left; width:200px; height:100px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<div id="div1ev" ondragover="allowDrop(event)" ondrop="drop(event)"> <img draggable="true" id="drag1" ondragstart="drag(event)" src="http://bit.ly/bendoi001" width="180" />bendoi.vn</div>
<div id="div2ev" ondragover="allowDrop(event)" ondrop="drop(event)"> </div>
</fieldset>

Xem Kết quả

bendoi.vn

Thank: w3c