1.创建拖拽对象

给需要拖拽的元素设置draggable属性，它有三个值：

true：元素可以被拖拽；

false：元素不能被拖拽；

auto： 浏览器自己判断元素是否能被拖拽。

2.处理拖拽事件

当我们拖拽对象的时候会触发拖拽事件包括：

A.dragstart：当元素拖拽开始触发；

B.drag：在元素拖拽过程中触发；

C.dragend：元素拖拽结束时触发

3.创建投放区

①当拖拽对象进入投放区的时候会触发相关的事件

A.dragenter：当拖拽对象进入投放区时触发； B.dragover：拖拽对象在投放区内移动时触发； C.dragleave：拖拽对象没有投放到投放区，离开投放区的 时候触发；

D.drop：拖拽对象投放在投放区时触发。

②注意：dragenter、dragover可能会受到默认事件的影 响，所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件

4.使用dataTransfer传递数据

当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法：

1.types：返回数据的格式； 2.getData()：返回指定格式数据； 3.setData(, )：设置指定格式数据；

4.clearData()：移除指定格式数据； 5.files：返回已经投放的文件的信息数组。 1.type：文件类型

2.size:文件大小

3.name:文件名

编程实例：

div{

width: 200px;

height: 200px;

border: 1px solid red;

margin:30px;

float: left;

}

img{

width: 200px;

height: 200px;

}

function drag(e){

e.dataTransfer.setData("Text", e.target.id);

}

function drop(e){

var data= e.dataTransfer.getData("Text")

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

e.preventDefault();

}

function allowDrag(e){

e.preventDefault();

}

HTML5拖拽功能中 dataTransfer对象详解

有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

HTML5拖拽/拖放(drag & drop)详解

H5中拖拽属性: draggable: auto | true | false   拖动事件:   - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...

HTML5 拖拽功能

本地文件拖动到页面实例:(支持IE)

RCP：拖拽功能的实现 Drag and Drop

SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...

Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结

Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...

html5中的拖拽功能

拖拽元素支持的事件 ondrag 应用于拖拽元素,整个拖拽过程都会调用 ondragstart 应用于拖拽元素,当拖拽开始时调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 on ...

Html5拖拽复制

拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

HTML5 拖拽实现

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

随机推荐

sizzle分析记录：分解流程

Name: ...

Android 关于“NetworkOnMainThreadException”

网络收集的原因如下,以及解决办法: 我补充总结一下: 解决办法一:在操作网络类(socket连接)的activity的protected void onCreate(Bundle savedInsta ...

Python 提示 no module named win32api

Windows下运行Python程序 提示错误  说是没有win32api的模块 解决办法 : 安装pywin32对应于Python的版本  可从https://sourceforge.net/pro ...

2、使用Struts2实现登录功能(没有连接数据)

1.创建如下的目录结构 2.在com.entity包下创建 package com.entity; /** * 用户类 * @author Holly老师 * */ public class User ...

beautifulSoup基本用法及find选择器

总结来源于官方文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html#find-all 示例代码段 html_do ...

ftp删除目录和文件，目录下有文件删除提示【550 Remove directory operation failed.】

注意:目录下有文件,直接删除目录会失败,提示550 Remove directory operation failed. 必须先将目录下的文件都删除,才能删除目录   ftp命令行: ftp删除目 ...

项目引入非配置的文件，打成war包后测试报错的可能原因

写在前边 这阵子有点忙,开发一个微服务项目中读取配置文件的时候在本地测试是可以的,但是一到测试环境就报错,经查看发现是因为发布的时候是用的war包,使用java -jar xxx.war启动的,所以用 ...

FreeMarker使用小记(HelloWorld)

FreeMarker是开源的模板框架.对于它的介绍网上已经很多了.详情可参考主页:http://www.freemarker.org/ 现在我们就开始我们的FreeMarker版的Hello Worl ...

Android应用安全防护和逆向分析 ——apk混淆成其他语言代码

现在很多人对于app的安全是越来越重视了,尤其是金融相关的行业,对于app的防范可是下足了功夫.各种加固,各种加密算法,层出不穷.我个人觉得,在安全技术这块,没有绝对安全的.也许今天这个技术起到了防范 ...

SpringMVC笔记——Spring+MyBatis组合开发简单实例

简介 SSH框架很强大,适合大型项目开发.但学无止境,多学会一门框架组合开发会让自己增值许多. SSM框架小巧精致,适合中小型项目快速开发,对于新手来说也是简单上手的.在SSM框架搭建之前,我们先学习 ...