• 售前

  • 售后

热门帖子
入门百科

Html5实现怎样在两个div元素之间拖放图像

[复制链接]
123457500 显示全部楼层 发表于 2021-10-25 19:14:57 |阅读模式 打印 上一主题 下一主题
原本结果

拖拽之后结果

代码如下

复制代码代码如下:
  1. <br /><!DOCTYPE HTML><br /><html><br /><head><br /><style type="text/css"><br />#div1, #div2<br />{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}<br /></style><br /><script type="text/javascript"><br />function allowDrop(ev)<br />{<br />ev.preventDefault();<br />}<br />function drag(ev)<br />{<br />ev.dataTransfer.setData("Text",ev.target.id);<br />}<br />function drop(ev)<br />{<br />ev.preventDefault();<br />var data=ev.dataTransfer.getData("Text");<br />ev.target.appendChild(document.getElementById(data));<br />}<br /></script><br /></head><br /><body><br /><img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" /><br /><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><br />  </div><br /><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /></body><br /></html><br /><br />
复制代码
它看上去大概有些复杂,不过我们可以分别研究拖放事件的不同部门。
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :

复制代码代码如下:
<img draggable="true" />

拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么。
在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据范例和值:

复制代码代码如下:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中,数据范例是 "Text",值是可拖动元素的 id ("drag1")。
放到那边 - ondragover
ondragover 事件规定在那边放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:

复制代码代码如下:
event.preventDefault()

举行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):

复制代码代码如下:
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代码解释:
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)通过 dataTransfer.getData("Text") 方法得到被拖的数据。该方法将返回在 setData() 方法中设置为相同范例的任何数据。被拖数据是被拖元素的 id ("drag1")把被拖元素追加到放置元素(目标元素)中

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作