var data = ev.dataTransfer.getData( text ev.target.appendChild(document.getElementById(data)); /script /head body div id= div1 ondrop= drop(event) ondragover= allowDrop(event) /div img id= drag1 src= img_logo.gif draggable= true ondragstart= drag(event) width= 336 height= 69 /body /html
親自試一試
它也許看上去有點復雜,不過讓我們研究一下拖放事件的所有不同部分。
默認地,數據/元素無法被放置到其他元素中。為了實現拖放,我們必須阻止元素的這種默認的處理方式。
這個任務由 ondragover 事件的 event.preventDefault() 方法完成:
event.preventDefault()
var data = ev.dataTransfer.getData( text ev.target.appendChild(document.getElementById(data));代碼解釋: 調用 preventDefault() 來阻止數據的瀏覽器默認處理方式(drop 事件的默認行為是以鏈接形式打開)通過 dataTransfer.getData() 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據被拖數據是被拖元素的 id ( drag1 )把被拖元素追加到放置元素中