1、拖動元素img的相關(guān)設(shè)置：
設(shè)置元素可以拖動屬性
draggable="true"
設(shè)置元素被拖動時(shí)觸發(fā)的事件
ondragstart="drag(event)"
圖片元素可拖動的完整代碼
HTML：
<img id="drag1" src="images/ycbt1.JPG" draggable="true" ondragstart="drag(event)" />
Javascript：
<script>
function drag(event){
event.dataTransfer.setDate("Text",ev.target.id);
}
</script>
2、設(shè)置允許拖動對象放置的元素div：
允許拖動圖片放置在div內(nèi)，阻止對事件的默認(rèn)處理方式，在div內(nèi)添加屬性
ondragover="allowDrop(event)"
放置時(shí)觸發(fā)的事件
ondrop="drop(event)"
div元素可放置拖動img的完整代碼
HTML：
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:600px; height:100px; border:1px solid black"></div>
Javascript:
<script>
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function allowDrop(ev)
{
ev.preventDefault();
}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
3、把兩張圖片img拖動到一個(gè)div中，并排放置完整代碼
HTML：
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img class="img" id="drag1" src="images/ycbt1.JPG" draggable="true" ondragstart="drag(event)"/>
<img class="img" id="drag2" src="images/ycbt2.JPG" draggable="true" ondragstart="drag(event)"/>
</body>
CSS：
<style type="text/css">
#div1 {width:600px; height:100px; border:1px solid black; padding:10px}
.img {width:60px; height:90px; margin:10px; float:left}
</style>
Javascript:
<script type="text/javascript">
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function allowDrop(ev)
{
ev.preventDefault();
}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
