旅游景点 旅游攻略 日本旅游 文化旅游 旅游景区 昆明旅游 桂林旅游 乡村旅游 上海旅游

在网页上实现图片拖放的小实例

时间:2024-10-12 17:14:03

1、一个矩形。我们先用代码设置一个矩形的图形,这个矩形有着合适的长宽比例,有着红色的边框,从而让我们可以放下整个百度经验的图标。<style type="text/css">#div1 {width:300px; height:100px;padding:10px;border:3px solid red;}</style>

在网页上实现图片拖放的小实例

2、java代码,我们在网页上的这上拖放操作是通过java代码来实现的。我们在网页中需要声明一下的。<script type="text/javascript">function allowDrop(th){th.preventDefault();}function drag(th){th.dataTransfer.setData("Text",th.target.id);}function drop(th){th.preventDefault();var data=th.dataTransfer.getData("Text");th.target.appendChild(document.getElementById(data));}</script>

在网页上实现图片拖放的小实例

3、给出网页中出现的提示语句如下:<p>请把百度经验拖放到矩形中:</p>

在网页上实现图片拖放的小实例

4、ontrop标签 。我们把这个拖放的元素设定为任意的。<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

在网页上实现图片拖放的小实例

5、给出图像所在的位置,这是一个链接或者一个地址。

在网页上实现图片拖放的小实例

6、回到调试窗口之后,我们就可以把这个百度经验的LOGO拖放到原来的矩形框中了。

在网页上实现图片拖放的小实例
© 2025 途途旅游
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com