HTML5之画布的拖拽/拖放

简介:

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function allowDrop(ev){

ev.preventDeafault();

}

function drag(ev){

ev.dataTranster.setData("Text",ev.target.id);

}

function drop(ev){

 var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

ev.preventDefault();

}

</script>

</head>

<body>

<div id ="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

</body>

</html>


使得一个元素能够拖动

很easy。仅仅须要将一个元素的拖动属性改动为draggable,例如以下:

 
  1. <img draggable="true" />

怎样拖动 - ondragstart() 和 setData()方法

然后,我们指定当一个元素拖动的时候会运行的操作。

在上面的演示中。ondragstart属性调用了一个方法, drag(event)。这里指定了那个数据被拖动。

dataTransfer.setData()方法设置了数据类型和被拖动的数据:

 
  1. function drag(ev){
  2. ev.dataTransfer.setData("Text",ev.target.id);
  3. }

在这里样例中。data type是"Text",数值是被拖动元素的ID。

哪里去放置(drop) - ondragover

ondragover事件指定了拖动的元素能够被放置的位置。

缺省,数据/元素不能被drop到另外的元素。 为了同意drop,你须要先阻止缺省的处理方式。我们能够调用event.preventDefault()方法,例如以下:

 
  1. event.preventDefault()

运行放置(drop)

当可拖动的数据被drop的时候,drop事件触发。

在上面的样例中。ondrop属性能够调用一个方法。drop(event):

 
  1. function drop(ev)
  2. {
  3. var data=ev.dataTransfer.getData("Text");
  4. ev.target.appendChild(document.getElementById(data));
  5. ev.preventDefault();
  6. }

以上代码:

  • 使用dataTransfer.getData("Text")得到被拖动的数据。这种方法将会返回setData()方法中设置的不论什么数据。 
  • 被拖动的数据是能够拖动元素("drag1")的id
  • 加入可拖动的元素到放置的元素
  • 调用preventDefault()方法来阻止浏览器的缺省数据处理方式(比如,打开链接)





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5088553.html,如需转载请自行联系原作者

相关文章
|
18天前
|
移动开发 HTML5
HTML5 拖放(Drag 和 Drop)2
为了实现元素的可拖放功能,首先需将元素的 `draggable` 属性设为 `true`。接着,使用 `ondragstart` 事件指定拖动开始时的动作,通过 `dataTransfer.setData()` 设置拖动数据的类型和值。`ondragover` 事件用于确定放置位置,并通过 `event.preventDefault()` 允许放置。最后,`ondrop` 事件触发时执行放置操作,使用 `dataTransfer.getData()` 获取拖动数据并将其追加到目标元素中。
|
3月前
|
移动开发 JavaScript API
HTML5 拖放详解
HTML5 的拖放功能增强了网页的互动性和用户友好性,允许用户通过拖动操作移动网页元素。其核心包括拖动源和放置目标,并提供了 `draggable` 属性及多个事件(如 `dragstart`、`dragover` 和 `drop`)来实现这一功能。示例代码展示了如何使用这些 API 创建一个简单的拖放组件,通过设置样式和监听事件来提升用户体验。在实际应用中,需注意样式提示和浏览器兼容性测试。
|
7月前
|
移动开发 前端开发 JavaScript
HTML画布
HTML画布
54 0
|
2月前
|
小程序 数据可视化 开发工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
33 0
|
3月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
7月前
|
JavaScript 前端开发 搜索推荐
HTML拖放
HTML拖放
44 0
|
7月前
|
移动开发 JavaScript 前端开发
HTML5作业(二)-----扑克牌拖放小游戏
该实验旨在理解元素拖放、CSS定位和DOM操作,任务是创建一个扑克牌拖放游戏。用户需将A框内13张随机扑克牌(背面朝上)按顺序拖至B框,最多存5张。当B框内形成顺子时游戏结束,显示拖动次数。实验提供HTML结构及部分JavaScript代码,包括创建和乱序扑克牌、处理拖放事件等。
144 0
|
7月前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
98 0
|
7月前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
92 0
|
7月前
|
移动开发 前端开发 应用服务中间件
前端——html拖拽原理
前端——html拖拽原理
63 0