html5中的拖拽功能
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
} .div1,
.div2,
.div3 {
margin: 0 20px;
float: left;
width: 200px;
height: 200px;
border: 1px solid #000;
}
div{
display: flex;
flex-direction: column;
align-items: center
}
p{
display: flex;
flex-direction: column;
align-items: center
} .p1 {
width: 50px;
background-color: pink;
margin: 5px 0;
} .p2 {
width: 80px;
background-color: burlywood;
margin: 5px 0;
}
.p3 {
width: 110px;
background-color: rgb(133, 88, 29);
margin: 5px 0;
}
.p4 {
width: 140px;
background-color: rgb(172, 37, 48);
margin: 5px 0;
}
.p5 {
width: 170px;
background-color: rgb(17, 182, 31);
margin: 5px 0;
}
.p6 {
width: 200px;
background-color: rgb(90, 33, 155);
margin: 5px 0;
}
</style>
</head> <body>
<div id="div1" class="div1">
<!-- 在h5中，如果想拖拽元素，就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽 -->
<p id="pe3" class="p3" draggable="true">3</p>
<p id="pe2" class="p2" draggable="true">2</p>
<p id="pe5" class="p5" draggable="true">5</p>
<p id="pe1" class="p1" draggable="true">1</p>
<p id="pe6" class="p6" draggable="true">6</p>
<p id="pe4" class="p4" draggable="true">4</p>
</div>
<div id="div2" class="div2"></div> <div id="div3" class="div3"></div> <script>
/* 拖拽元素支持的事件
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素是调用
ondragend 应用于拖拽元素，当拖拽结束时调用 目标元素支持的事件
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
*/ // var obj = null; /* 当前被拖拽的值*/ document.ondragstart = function (e) {
/*通过dataTransfer来实现数据的存储与获取
setData(format, data)
format: 数据的类型： text/html text/uri-list
Data: 数据： 一般来说是字符串值
*/
// e.dataTransfer.setData("Text", e.target.id);
e.target.style.opacity = 0.5
e.dataTransfer.setData("text", e.target.id);
console.log(e.target.id)
} document.ondragend = function (e) {
e.target.style.opacity = 1;
} /*浏览器默认会阻止ondrop事件：我们必须在ondrapover中阻止默认行为*/
document.ondragover = function (e) {
e.preventDefault();
} document.ondrop = function (e) {
/*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
} </script>
</body> </html>
html5中的拖拽功能的更多相关文章
- 浅谈DevExpress<四>：TreeList中的拖拽功能
本篇要实现的目标,简单来说就是把一个treelist的节点用鼠标拖到另外的节点(自身或其他的listview)上,如下图: 1
- HTML5中的拖拽与拖放(drag&&drop)
1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结
Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...
- vue2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vuejs2.0使用Sortable.js实现的拖拽功能( 转)
文章目录 简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是 ...
- PCB Winform中的WebBrowser扩展拖放(拖拽)功能 实现方法
我们在Winform支持网页通常增加WebBrowser控件实现,相当于内嵌浏览器浏览网页使用, 而此WebBrowser默认情况是文件拖入功能是不支持的, 如何才能支持呢.在这里介绍如何实现方法 一 ...
- 给Winform中的TabControl添加更现代的拖拽功能
上周接到一个开发任务,大致是允许APP中的Tab拖动以成为一个独立Tab,脱离之前的TabControl,就是现在Web拖动标签页创建新窗口的功能,现在浏览器必备的功能,应该很简单,然而我司采用的Do ...
- winform中文本框添加拖拽功能
对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...
随机推荐
- 洛谷P1219 八皇后
题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序列2 4 6 1 3 ...
- Java空对象模式
在“空对象”模式中,空对象将替换NULL对象实例的检查.而不是检查一个空值,Null对象反映一个无关的关系(即什么也不做). 这种Null对象还可以用于在数据不可用时提供默认行为. 在空对象模式(Nu ...
- Ubuntu安装程序提示无法获得锁
目录 1.问题描述 2.问题原因 3.解决方案 3.1方法一:杀掉apt-get进程 3.2方法二:强制解锁 1.问题描述 E: 无法获得锁 /var/lib/dpkg/lock-frontend - ...
- iphoneX的适配问题
iphoneX();function iphoneX(){ var oMeta = document.createElement('meta'); oMeta.setAttribute('name', ...
- C# goto学习
如下代码: ; goto b;//goto语句用来控制程序跳转到某个标签的位置 a++; b: Console.WriteLine(a); Console.ReadKey(); 输出结果为:5,执行g ...
- django-celery beat报错 error pid
最近在用django-celery添加定时任务,测试时启动过一次Beat,beat按理说是只能启动一个的但是不服务器都重启过了还是提示已有进程在运行. ERROR: Pidfile (celerybe ...
- CentOS使用手册(二)
前言: 本篇目录: 1.Linux软件安装调试 2.Linux内存.CPU.进程.端口.硬盘管理 3.Linux systemctl管理服务.防火墙firewalld以及SELinux配置 Linux ...
- 微信小程序中new Date()转换时间时间格式时IOS不兼容的问题
本周写小程序,遇到的一个bug,在chrome上显示得好好的时间,一到Safari/iPhone 就报错 “invalid date”,时间格式为“2019.06.06 13:12:49”,然后利用n ...
- JavaScript寻找最长的单词算法
返回提供的句子中最长的单词的长度. 返回值应该是一个数字. 第一步,使用String.prototype.split()方法将字符串转换成数组 function findLongestWord(str ...
- 你（可能）不知道的 web api
转自奇舞周刊 简介 作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法.用 ...