html元素拖动,html实现拖拽效果
本文的内容是关于在html5中如何实现超文本标记语言元素拖拽功能。在html5之前要实现拖拽，需要借助js，现在html5内部就支持了拖拽的功能，但是要实现稍微复杂的功能还是少不了射流研究…的帮忙。下面我们看几个例子。1.创建拖拽对象
我们可以通过可拖动的属性告诉浏览器，哪些元素需要实现拖拽功能可拖动的有三个值：真：元素可以被拖拽；错误：元素不能被拖拽；自动：浏览器自己判断元素是否能被拖拽。
系统默认值是自动，但汽车情况下浏览器对不同元素拖拽功能的支持是不一样，如：支持图片对象，不支持差异对象。所以，如果需要拖拽一个元素，最好还是把德拉盖尔设置为没错。下面我们看一个例子：复制代码代码如下：
！声明文档类型
超文本标记语言
头
标题示例/标题
风格
#src *
{
浮动：左；
}
#target，#src img
{
边框：细纯黑；
填充：2px
保证金：4px
}
#目标
{
身高：123像素
宽度：220像素
文本对齐：居中；
显示：表格；
}
#目标p
{
显示：表格单元；
垂直对齐：居中；
}
#目标图片
{
边距：1px
}
/风格
/头
身体
div id=src
img draggable= true id= car 1 src= img/1。jpg alt=汽车1 /
img draggable= true id= car 2 src= img/2。jpg alt=汽车2 /
img draggable= true id= car 3 src= img/3。jpg alt=汽车3 /
div id=target
p id=msg
放在这里/p
/div
/div
脚本
var src=文档。getelementbyid( src )；
var target=文档。getelementbyid(“target”)；
/脚本
/body
/html
运行效果：
2.处理拖拽事件
现在我们来了解拖拽相关的事件，有两种类型的事件，一种是拖拽对象的事件，一种是投放区的事件。拖拽事件包括：拖动启动：当元素拖拽开始触发；拖动：在元素拖拽过程中触发；德拉根：元素拖拽结束时触发。下面我们就看一个例子：复制代码代码如下：
！声明文档类型
超文本标记语言
头
标题示例/标题
风格
#src *
{
浮动：左；
}
#target，#src img
{
边框：细纯黑；
填充：2px
保证金：4px
}
#目标
{
身高：123像素
宽度：220像素
文本对齐：居中；
显示：表格；
}
#目标p
{
显示：表格单元；
垂直对齐：居中；
}
#目标图片
{
边距：1px
}
img.dragged
{
背景色：橙色；
}
/风格
/头
身体
div id=src
img draggable= true id= car 1 src= img/1。jpg alt=汽车1 /
img draggable= true id= car 2 src= img/2。jpg alt=汽车2 /
img draggable= true id= car 3 src= img/3。jpg alt=汽车3 /
div id=target
p id=msg
放在这里/p
/div
/div
脚本
var src=文档。getelementbyid( src )；
var target=文档。getelementbyid(“target”)；
var msg=文档。getelementbyid( msg )；
src.ondragstart=function (e) {
e。目标。班级名单。添加(拖动)；
}
src.ondragend=function (e) {
e。目标。班级名单。移除(“拖动”)；
msg.innerHTML=拖放到此处；
}
src.ondrag=function (e) {
味精。innerhtml=e . target。id；
}
/脚本
/body
/html
运行效果：
3.创建投放区
我们来看投放区相关的事件：拖动输入：当拖拽对象进入投放区时触发；dragover:拖拽对象在投放区内移动时触发；请假：拖拽对象没有投放到投放区，离开投放区的时候触发；下降：拖拽对象投放在投放区时触发。
我们来看一个例子：复制代码代码如下：
！声明文档类型
超文本标记语言
头
标题示例/标题
风格
#src *
{
浮动：左；
}
#target，#src img
{
边框：细纯黑；
填充：2px
保证金：4px
}
#目标
{
身高：123像素
宽度：220像素
文本对齐：居中；
显示：表格；
}
#目标p
{
显示：表格单元；
垂直对齐：居中；
}
#目标图片
{
边距：1px
}
img.dragged
{
背景色：浅灰色；
}
/风格
/头
身体
div id=src
img draggable= true id= car 1 src= img/1。jpg alt=汽车1 /
img draggable= true id= car 2 src= img/2。jpg alt=汽车2 /
img draggable= true id= car 3 src= img/3。jpg alt=汽车3 /
div id=target
p id=msg
放在这里/p
/div
/div
脚本
var src=文档。getelementbyid( src )；
var target=文档。getelementbyid(“target”)；
var msg=文档。getelementbyid( msg )；
var draggedID
target.ondragenter=handleDrag
target.ondragover=handleDrag
功能手柄拖动(e) {
e。防止默认()；
}
target.ondrop=function (e) {
var new elem=文档。getelementbyid(拖动id).克隆节点(假);
目标。innerhtml=
目标。appendchild(新elem)；
e。防止默认()；
}
src.ondragstart=function (e) {
拖动id=e . target。id；
e。目标。班级名单。添加(拖动)；
}
src.ondragend=function (e) {
var elems=文档。查询选择器全部(.拖);
for(var I=0；长度；i ) {
elems[I]。班级名单。移除(“拖动”)；
}
}
/脚本
/body
/html
运行结果：
4.使用DataTransfer
我们使用数据传输从拖拽对象向投放区传递数据数据传输有下面的属性和方法：类型：返回数据的格式；获取数据(格式):返回指定格式数据；setData(格式，数据):设置指定格式数据；clearData(格式):移除指定格式数据；文件：返回已经投放的文件数组。
我们来看下面的例子，他实现的效果和例3一样：复制代码代码如下：
！声明文档类型
超文本标记语言
头
标题示例/标题
风格
#src *
{
浮动：左；
}
#src img
{
边框：细纯黑；
填充：2px
保证金：4px
}
#目标
{
边框：细纯黑；
保证金：4px
}
#目标
{
身高：123像素
宽度：220像素
文本对齐：居中；
显示：表格；
}
#目标p
{
显示：表格单元；
垂直对齐：居中；
}
img.dragged
{
背景色：橙色；
}
/风格
/头
身体
div id=src
img draggable= true id= car 1 src= img/1。jpg alt=汽车1 /
img draggable= true id= car 2 src= img/2。jpg alt=汽车2 /
img draggable= true id= car 3 src= img/3。jpg alt=汽车3 /
div id=target
p id=msg
放在这里/p
/div
/div
脚本
var src=文档。getelementbyid( src )；
var target=文档。getelementbyid(“target”)；
target.ondragenter=handleDrag
target.ondragover=handleDrag
功能手柄拖动(e) {
e。防止默认()；
}
target.ondrop=function (e) {
var dropper did=e .数据传输。获取数据(“文本”)；
var new elem=文档。getelementbyid(dropper did).克隆节点(假);
目标。innerhtml=
目标。appendchild(新elem)；
e。防止默认()；
}
src.ondragstart=function (e) {
e.dataTransfer.setData(Text ，e . target。id)；
e。目标。班级名单。添加(拖动)；
}
src.ondragend=function (e) {
var elems=文档。查询选择器全部(.拖);
for(var I=0；长度；i ) {
elems[I]。班级名单。移除(“拖动”)；
}
}
/脚本
/body
/html5.拖拽文件
html5支持文件api，可以让我们操作本地文件。一般我们不直接使用文件api，我们可以结合其他特性一起使用，比如结合拖拽特效，如下例：复制代码代码如下：
！声明文档类型
超文本标记语言
头
标题示例/标题
风格
身体*
{
浮动：左；
}
#目标
{
边框：中双黑；
保证金：4px
身高：75像素
宽度：200像素
文本对齐：居中；
显示：表格；
}
#目标p
{
显示：表格单元；
垂直对齐：居中；
}
桌子
{
保证金：4px
边框-塌陷：塌陷；
}
th，td
{
填充：4px
}
/风格
/头
身体
div id=target
p id=msg
将文件放在此处/p
/div
表id=data border=1
/表格
脚本
var target=文档。getelementbyid(“target”)；
target.ondragenter=handleDrag
target.ondragover=handleDrag
功能手柄拖动(e) {
e。防止默认()；
}
target.ondrop=function (e) {
var文件=e .数据传输。文件；
var tableElem=document。getelementbyid( data )；
tableelem。innerhtml=名称/类型/大小/类型/类型；
for(var I=0；我文件。长度；i ) {
var row=trtd files[i].命名/tdtd 文件[我].类型"/tdtd "文件[我].尺寸/TD/tr ；
tableElem.innerHTML=row
}
e。防止默认()；
}
/脚本
/body
/html
数据传输返回文件列表对象，我们可以把他当做文件数组对象，文件包含下面属性：名称：文件名字；类型：文件类型（哑剧类型);尺寸：文件大小。
运行效果：
6.上传文件
下面介绍一个通过拖拽创建交互式、快速动态网页应用的网页开发技术上传文件的实例。复制代码代码如下：
！声明文档类型
超文本标记语言
头
标题示例/标题
风格。桌子
{
显示：表格；
}。排
{
显示：表格行；
}。细胞
{
显示：表格单元；
填充：5px
}。标签
{
文本对齐：右对齐；
}
#目标
{
边框：中双黑；
保证金：4px
高度：50px
宽度：200像素
文本对齐：居中；
显示：表格；
}
#目标p
{
显示：表格单元；
垂直对齐：居中；
}
/风格
/头
身体
form id= fruit form method= post action=/upload处理程序。阿什克斯
div class=table
div class=row
div class=单元格标签
香蕉：/div
div class=cell
输入名称=香蕉值=2 //div
/div
div class=row
div class=单元格标签
苹果：/div
div class=cell
输入名称=苹果值=5 //div
/div
div class=row
div class=单元格标签
樱桃：/div
div class=cell
输入name= cherries value= 20 /div
/div
div class=row
div class=单元格标签
文件：/div
div class=cell
输入类型=file name=file //div
/div
div class=row
div class=单元格标签
总计：/div
div id=结果 class=单元格
项目/部门
/div
/div
div id=target
p id=msg
将文件放在此处/p
/div
按钮id=提交类型=提交
提交表单/按钮
/表单
脚本类型=文本/javascript
var target=文档。getelementbyid(“target”)；
var httpRequest
定义变量文件列表；
target.ondragenter=handleDrag
target.ondragover=handleDrag
功能手柄拖动(e) {
e。防止默认()；
}
target.ondrop=function (e) {
文件列表=e .数据传输。文件；
e。防止默认()；
}
文档。getelementbyid( submit )。onclick=功能手柄按钮按(e) {
e。防止默认()；
var表单=文档。getelementbyid( fruitform )；
var formData=new formData(form)；
如果(文件列表){
for(var I=0；i fileList.lengthi ) {
formData.append(file i，file list[I])；
}
}
http request=new XMLHttpRequest()；
http请求。onreadystatechange=处理响应；
httpRequest.open(POST ，表单。行动)；
http请求。发送(formData)；
}
函数handleResponse() {
如果(http请求。就绪状态==4 http请求。状态==200){
var data=JSON。解析(http请求。responsetext)；
文档。getelementbyid(“结果”).innerHTML=您已订购 data.total 项目
}
}
/脚本
/body
/html
效果：
上面的一些例子不同浏览器运行效果可能不同，我用的是铬浏览器，除了例5和6不支持多文件外，其他例子运行正常。大家可以下载演示。
演示下载地址：Html5Guide.draggable.rar
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。