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 )把被拖元素追加到放置元素中