转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767
本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍一下HTML5的拖放。
拖放(Drag 和 drop)是 HTML5 标准的组成部分。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
被拖元素,dragElement :
1、添加事件:ondragstart
2、添加属性:dragable
放置元素,dropElement:
1、添加事件:ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser划入划出一类的事件很类似,字面也很好理解,不赘述了,下面会用例子来说明。
1、页面上元素间的拖放
下面用个小例子,div间的拖放来展示,各个事件如何被触发:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
#dropEle
div
{
float: left;
}
</style>
<script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 拖放(Drag 和 drop)是 HTML5 标准的组成部分。
* 浏览器支持
*Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
*/
$(function ()
{
$("#dragEle")[0].ondragstart = function (event)
{
console.log("dragStart");
event.dataTransfer.setData("Text", event.target.id);
};
/**
* 当放置被拖数据时,会发生 drop 事件。
* 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
* @param event
*/
$("#dropEle")[0].ondrop = function (event)
{
/* for (var p in event.dataTransfer)
{
console.log(p + " = " + event.dataTransfer[p] + " @@");
}
*/
console.log("onDrop");
var id = event.dataTransfer.getData("Text");
$(this).append($("#" + id).clone().text($(this).find("div").length));
event.preventDefault();
};
/**
* ondragover 事件规定在何处放置被拖动的数据。
*默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
*/
$("#dropEle")[0].ondragover = function (event)
{
console.log("onDrop over");
event.preventDefault();
}
$("#dropEle")[0].ondragenter = function (event)
{
console.log("onDrop enter");
}
$("#dropEle")[0].ondragleave = function (event)
{
console.log("onDrop leave");
}
$("#dropEle")[0].ondragend = function (event)
{
console.log("onDrop end");
}
});
</script>
</head>
<body>
<div style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;"
draggable="true" id="dragEle" >
</div>
<div style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;"
id="dropEle"></div>
</body>
</html>
效果图:
效果图注意看下console面板的输出:观察每个事件何时被触发。
需要注意几点:
a、ondragover中必须组织事件的默认行为,默认地,无法将数据/元素放置到其他元素中。
b、drop 事件的默认行为是以链接形式打开,所以也需要阻止其默认行为。
还有可能注意到:在拖放时,event中包含一个event.dataTransfer 对象,上例中我们使用了该对象的setData方法传递了拖动div的id,然后在drop中取得该id,并且复制了该元素添加到放置的div中。
下面介绍下该对象的其他方法:
event.dataTransfer :
setDragImage = function setDragImage() { [native code] } @@
我使用了js打印出了它所有的属性:
1、getData,setData上例已经使用了,clearData就是清除设置的数据。
2、值得注意的是files,当把操作系统中选择的一个或多个文件拖入该div中,files中会存储拖入文件的信息,然后我们通过file可以得到文件的类型,长度,内容然后实现上传。
3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。
4、types,effectAllowed和dropEffect分别是拖入元素的类型,拖拽过程中鼠标显示的样式,我觉得可以忽略了这几个属性,一般用不到。
分享到:
相关推荐
主要为大家介绍了HTML5+CSS3实现拖放(Drag and Drop)的实现方法,需要的朋友可以参考下
快速开始首先,请克隆该项目并在终端中运行以下命令: $ git clone https://github.com/Big-Silver/Drag-and-Drop.git drag_drop$ cd drag_drop $ Run index.html in browser.In drag_drop.js$(document).ready...
这是一款基于jQuery+CSS3实现的支持文件拖放上传代码,带动画效果的jQuery文件上传插件。
拖放拖放“ 50个项目的50天课程”图像。 使用HTML,CSS和JScript处理拖放功能,以及在放置图像之前的悬停效果。
link href =' bower_components/draganddrop/src/draganddrop.css ' rel =' stylesheet ' type =' text/css '/>< script src =' bower_components/jquery/dist/jquery.min.js ' type =' text/javascript ' &...
拖放卡拖放卡使用Html,Css和JavaScript使用库(SortableJS)进行美观而简单的拖放项目。 不要忘了加入频道,观看更多类似这样的视频。
简易拖放 拖放元素,包括资源管理器和垃圾桶。 资源管理器元素将填充文件和目录列表。 它需要用于打开文件以及移动和删除文件的处理程序一个目录。...您可以使用安装Easy-DragAndDrop: npm install easy-dragand
day21-Drag N Drop(拖放图片)
一个简单的“拖放”游戏,展示HTML5中的拖放功能。 客户端是使用HTML,CSS和Javascript实现的。 服务器端是使用Javascript和Perl实现的。 项目演示: : 该项目已部署在本地服务器(XAMPP)上。 配置XAMPP的步骤...
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注释:在 Safari 5.1.2 中不支持拖放。 HTML5 拖放实例 <!DOCTYPE html> <html> <head> <style type=text/css> #...
拖放卡 只是为了学习。 来自( )的教程“使用HTML CSS和JavaScript拖放卡| SortableJS”,版权所有Bedimcode( | )。
角度拖放 :warning_selector: 停产通知...安装npm install ng - drag - drop -- save用法导入默认样式将style.css导入到index.html中。 它具有一组默认样式,这些样式将应用于拖动操作。 这是完全可选的,您可以根据
SM-拖放Projeto para disciplina Software Educacional软件,是计算机拖放操作的一种理想方法(arrastar e soltar)。
拖放Angular Drag & Drop 已实现的 安全身份验证和授权工具与技术技术:HTML,MDBootstrap,CSS,Angular-10,Firebase,i18n,拖放,渐进式Web应用程序,jsPDF(将Receipt下载为PDF)。 数据库:Angular Firebase...
使用原生HTML5拖放API构建 支持 角度的 React 支持任何CSS库,例如 简单的API 支持 不需要jQuery(但有) @types/sortablejs打字稿定义 文章 (2019年4月26日) (2018年12月2日) (2014年12月22日) ...
井字游戏2玩家这是一个简单的拖放井字游戏,适合2个玩家。 我在个人时间的代码训练营的第二周就做了这个,目的是养成做一些个人项目的习惯。 纯CSS /纯JS。先决条件目前,资产是通过链接导入的。问题它们是跨浏览器...
拖曳使用HTML,CSS和Vanilla JS列出拖放项目项目将使用预先指定的列表项和3个列表部分进行初始化。 用户也可以在列表部分和其他列表部分中拖放项目。 拖动事件用于拖放。 事件委托用于最小化事件侦听器。 PS-仅在...
关于这个项目该“阶段”组件使用户可以选择元素,拖放元素并调整其大小。 这样的组件对于开发包括所见即所得的任何工具的开发人员将非常有用。 该项目得到维护,几乎没有依赖项,在。特征 移动和调整元素大小 支持流...
使用拖放ember-cli的文件上传器插件。 版本号 当前版本正在运行ember-cli> = 3.5.0 版本1.1.1 <=正在运行ember-cli 2.13.1 版本0.8.6 <=正在运行ember-cli 1.13.8 安装 ember install ember-cli-dropzonejs...