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

 时间: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拖放到原来的矩形框中了。

在网页上实现图片拖放的小实例
  • 快速扣logo图
  • 莲花山看花海攻略
  • 万能支撑器是什么?
  • flash制作树木变成木字的动画
  • 饿了么怎样关掉个性推荐功能
  • 热门搜索
    池州旅游 夏威夷旅游 华东五市旅游攻略 武当山旅游 旅游卫视 横店影视城旅游攻略 户外旅游 邢台旅游景点 怀化旅游 旅游用品