HTML5+CSS3完成拖放(Drag and Drop)示例

日期:2020-09-17 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

本文简易详细介绍1下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类的恶性事件很相近,字面也很好了解,不赘述了,下面会测试用例子来讲明。

2、网页页面上元素间的拖放
下面用个小事例,div间的拖放来展现,各个恶性事件怎样被开启:

拷贝编码
编码以下:
<html>
<title></title>
<meta charset="utf⑻">
<style type="text/css">
#dropEle
div
{
float: left;
}
</style>
<script src="./js/jquery⑴.8.3.js" type="text/javascript" charset="utf⑻"></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>
<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>

系统软件选中择的1个或好几个文档拖入该div中,files中会储存拖入文档的信息内容,随后大家根据file能够获得文档的种类,长度,內容随后完成提交。

3、setDragImage(image, x, y)用于设定电脑鼠标挪动全过程中随电脑鼠标1起挪动的实际效果图。务必在dragstart中设定。

4、types,effectAllowed和dropEffect各自是拖入元素的种类,拖拽全过程中电脑鼠标显示信息的款式,但是一般能够忽视这几个特性,1般用不到。