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,如需转载请自行联系原作者

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
HTML画布
HTML画布
32 0
|
2月前
|
JavaScript 前端开发 搜索推荐
HTML拖放
HTML拖放
24 0
|
2月前
|
移动开发 JavaScript 前端开发
HTML5作业(二)-----扑克牌拖放小游戏
该实验旨在理解元素拖放、CSS定位和DOM操作,任务是创建一个扑克牌拖放游戏。用户需将A框内13张随机扑克牌(背面朝上)按顺序拖至B框,最多存5张。当B框内形成顺子时游戏结束,显示拖动次数。实验提供HTML结构及部分JavaScript代码,包括创建和乱序扑克牌、处理拖放事件等。
|
2月前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
|
2月前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
2月前
|
移动开发 前端开发 应用服务中间件
前端——html拖拽原理
前端——html拖拽原理
29 0
|
10月前
|
移动开发 JavaScript API
基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序
46 0
|
11月前
|
移动开发 JavaScript 前端开发
封装HTML5中canvas画布操作的第三方库
封装HTML5中canvas画布操作的第三方库
588 0
|
移动开发 定位技术 API
HTML5 —— 拖放、地理位置、视频和音频的基本使用
HTML5 —— 拖放、地理位置、视频和音频的基本使用
|
移动开发 前端开发 JavaScript
HTML5 —— 初识 Canvas 画布
HTML5 —— 初识 Canvas 画布
102 0