HTML5 如何实现拖放'N'拖放

标签: html5
18人阅读 评论(0) 收藏 举报
分类:

在网络开发人员需要掌握的所有技术中,看起来最容易造成混淆和潜在问题的是拖拽。

这不是一项新技术,它已存在多年,但许多开发人员仍然执着于基于jQuery的旧方法,以牵连复杂(有时很慢且不准确)的拖放模拟。

现在HTML5包含一个拖放API,您已经有了一个非常简单的方法来实现无拖放拖放。

理解力学

拖放很容易理解。你有一个物体和一个目标。目标是允许用户点击对象并将其拖动到目标,然后您的应用程序需要做出适当的响应。

创建一个网页模板

这很简单,但我们需要有一个地方来放置所有的代码项目。您可以创建的最基本的网页模板是:

<!DOCTYPE html>
 < html > 
< head > 
</ head > 
< body > 
</ body > 
</ html >

定义一个可拖动的对象

你可能期望在这里有一些复杂的类似Java的定义,但实际上它就像在你的body部分的一个元素上设置一个“可拖动”属性一样简单,就像这样:

<div>
 < img  id = “dragMe”  src = “pic.jpg”  draggable = “true” > 
</ div >

正如你所看到的那样,这部分非常简单。事实上,对于某些浏览器,您甚至不需要为某些元素类型指定属性,但无论如何,仍然是一个好主意。

定义目标

目标是可以将对象拖到的区域。同样,这很简单,你只需要给目标一个CSS ID属性。

<div id = “drop_target” >
炸弹离开!
</ div >

添加一些CSS

我们应该确保一切都看起来应该看起来。将以下CSS样式信息添加到您的头部部分:

<风格>
#drop_target { border3 px solid#000 ; 填充:10像素; 身高:100像素; 宽度:100像素;}
#dragMe { height50 px; width:50 px;}
< / style>

实现JS功能

这一步只是为了确保你的应用程序知道对象的存在,并且它应该与它们交互。如果您需要创建一系列事件侦听器,则可以采取复杂的方法,但您并不需要任何精心处理基本拖放操作的内容。

真的,我们只需要定义两个函数来处理所有的移动,dragObject和dropObject。

<script>
 var moved = false ;
函数 dragObjecte {
    e.dataTransfer.effectAllowed = “移动” ;
    e.dataTransfer.setData(“obj1”,e.target.id);
    返回 false ;
}
function  dropObjecte {
     if(moved == true){
     return  false ;
    }
    var received = e.dataTransfer.getData(“obj1”);
    e.dataTransfer.dropEffect = “move” ;
    e.preventDefault();
    e.stopPropagation();
    e.target.appendChild(document.getElementById(received));
    移动=  ;
    返回 false ;
}
< / script>

例如,有关防止默认值和停止传播的内容只是为了覆盖默认的浏览器行为,例如可能导致它尝试在某处导航或打开图像。移动的变量可防止在执行操作后执行代码。

修改对象声明和目标声明

如果功能从未被调用,则不会发生任何事情。你只需要像这样改变对象和目标的声明:

<img id = “dragMe” src = “pic.jpg” draggable = “true” ondragstart = “dragObject(event);” >

<div id = “drop_target” ondragover = “event.preventDefault();” ondrop = “dropObject(
查看评论

HTML5之拖放属性实现图片的拖放

HTML5中实现拖放操作,至少经过如下步骤       1)设置被拖放对象元素的draggable属性设置为true       2)编写与拖放有关的事件处理代码 事件 产生事...
  • u010359143
  • u010359143
  • 2015-12-30 11:24:20
  • 1296

HTML5实现简单的拖放功能

HTML5实现简单的拖放功能
  • z983002710
  • z983002710
  • 2017-07-29 15:55:14
  • 233

html5实现图片任意拖放及本地图片拖放预览特效解析

最近一直在学习html5,对于图片在两个div内任意拖放感觉特别炫,扩展一下做一些特效应该很不错,而且还可以实现本地图片的拖拽上传功能,下面对上述两个功能做一个代码的解析: ** 1、HTML5...
  • u013137263
  • u013137263
  • 2015-08-24 08:58:47
  • 1303

深入理解html5拖放

最早在网页中引入JavaScript拖放功能是IE4。当时,网页中只有两种对象可以拖放:图像和某些文本。拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它。拖放文本时,要先选中文本,然后可以像拖放...
  • u013344815
  • u013344815
  • 2016-03-23 22:27:23
  • 820

HTML5--拖拽API(含超经典例子)

一、关于拖拽API 拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成,实际开发中使用比例占到3成,学习要求个人认为是达到掌握即可的程度。 二、什么是拖拽和释放? 拖...
  • baidu_25343343
  • baidu_25343343
  • 2016-11-18 13:08:40
  • 20229

HTML5拖放(Drag和Drop)的例子

  • 2015年04月30日 08:58
  • 815KB
  • 下载

使用H5拖放事件来写一个小程序

1.所有的元素都有一个draggable属性,用于指定是否启动该元素的拖放功能,而/两个元素默认启动拖放 innerHTML 2.拖放操作相关的事件:被拖动的元素的事件: 1.ondr...
  • qq_27905183
  • qq_27905183
  • 2016-11-04 17:45:05
  • 457

html5篇——拖放(Drag和Drop)

好久没有更新html5了,继续更新html5,今天更新html5的拖放功能。 拖放,就是抓取一个对象后拖放到另一个位置。很常用的一个功能,在html5中,任何元素都能够拖放。 浏览器支持 Inter...
  • u010556394
  • u010556394
  • 2016-05-30 17:23:33
  • 1766

HTML5拖放(drag和drop)

1. 说说“拖放事件” 拖放事件,即抓取对象以后拖动到另一个位置 有些事件在被拖放的元素上触发,有些在放置目标上触发。在拖动元素时,依次触发dragstart事件、drag事件、drag...
  • xiaguangzhiying
  • xiaguangzhiying
  • 2016-06-21 17:11:12
  • 1934

HTML5拖放事件

拖放是在“拖放源”和“拖放目标”之间传输数据的用户界面,它可以存在相同应用之间也可以是不同应用之间。 拖放源:任何有HTML draggable属性的文档元素都是拖放源。 拖放目标:任何文档都可以是...
  • u012729094
  • u012729094
  • 2016-05-05 14:28:24
  • 1855
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 6万+
    积分: 2568
    排名: 1万+
    博客专栏
    文章存档
    最新评论