html如何将两个图片并排放置,
原始效果
后阻力效应
代码如下所示
！声明文档类型
超文本标记语言
头
style type=text/css
#div1，#div2
{float:左；100px高度：35px边距：10px填充：10px边框：1px实心# aaaaaa}
/风格
脚本类型=文本/javascript
函数允许下降(ev)
ev . prevent default()；
功能阻力(ev)
ev.dataTransfer.setData(Text ，ev . target . id)；
功能下降
ev . prevent default()；
var data=ev . data transfer . get data( Text )；
ev . target . appendchild(document . getelementbyid(data))；
/脚本
/头
身体
img src=/I/w3 school _ logo _ black . gif draggable= true ondragstart= drag(event) id= drag 1 /
div id= div 1 ondrop= drop(event) ondragover= allow drop(event)
/div
div id= div 2 ondrop= drop(event) ondragover= allow drop(event)/div
/body
/html
这看起来可能很复杂，但是我们可以分别研究拖放事件的不同部分。
将元素设置为可拖动的。
首先，为了使元素可拖动，将draggable属性设置为true:
img draggable=true /
然后，指定拖动元素时会发生什么。
在上面的示例中，ondragstart属性调用一个函数drag(event)，该函数指定要拖动的数据。
dataTransfer.setData()方法设置拖动数据的数据类型和值：
功能阻力(ev)
ev.dataTransfer.setData(Text ，ev . target . id)；
在此示例中，数据类型为“Text”，值为可拖动元素的ID(“drag 1”)。
ondragover事件指定放置拖动数据的位置。
默认情况下，数据/元素不能放在其他元素中。如果需要设置允许的放置，我们必须防止元素的默认处理。
这是通过调用ondragover事件的event.preventDefault()方法来完成的：
事件. preventDefault()
当放置拖动的数据时，将发生drop事件。
在上面的示例中，ondrop属性调用函数drop(event):
功能下降
ev . prevent default()；
var data=ev . data transfer . get data( Text )；
ev . target . appendchild(document . getelementbyid(data))；
代码解释：
调用preventDefault()避免浏览器对数据的默认处理(drop事件的默认行为是作为链接打开)
通过dataTransfer.getData(Text )方法获取拖动的数据。该方法将任何数据集返回到setData()方法中的相同类型。
被拖动的数据是被拖动元素的ID(“drag 1”)
将拖动的元素追加到拖放的元素(目标元素)
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。