HTML5中怎样完成照片的拖拽

2021-02-06 11:05

HTML5中怎样完成照片的拖拽 |频道：HTML5|点一下： 次 event.dataTransfer.setData( Text ,event.target.id); }

（3） 将原素拖拽到特定部位（放）

默认设置状况下没法将原素拖拽放进另外一个部位，因而必须撤销默认设置恶性事件，必须采用preventDefault()方式

在其中 setData()方式指被拖数据信息的数据信息种类和值

appendChild() 方式从一个原素向另外一个原素中移动原素。

function drop(event) event.preventDefault();//撤销访问器的默认设置个人行为 var data=event.dataTransfer.getData( Text //获得特定文件格式的数据信息 event.target.appendChild(document.getElementById(data)); }

详细编码

body div id= box ondrop= drop(event) ondragover= allowDrop(event) /div img src= images/1.jpg id= drag1 draggable= true ondragstart= drag(event) script function allowDrop(event) event.preventDefault();//撤销恶性事件默认设置个人行为 function drag(event){ event.dataTransfer.setData( Text ,event.target.id) function drop(event){ event.preventDefault(); var data=event.dataTransfer.getData( text event.target.appendChild(document.getElementById(data)) /script