拖拽元素支持的事件
ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用
ondragend 应用于拖拽元素,当拖拽结束时调用
目标元素支持的事件
ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用
 
注意:浏览器默认会阻止ondrop事件:我们必须在ondrapover中阻止默认行为
实现了一个拖拽功能,其实是可以做成一个小游戏的。
<!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中的拖拽功能的更多相关文章

  1. 浅谈DevExpress<四>:TreeList中的拖拽功能

    本篇要实现的目标,简单来说就是把一个treelist的节点用鼠标拖到另外的节点(自身或其他的listview)上,如下图: 1 

  2. HTML5中的拖拽与拖放(drag&&drop)

    1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...

  3. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

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

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

  5. vue2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  6. vuejs2.0使用Sortable.js实现的拖拽功能( 转)

    文章目录   简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是 ...

  7. PCB Winform中的WebBrowser扩展拖放(拖拽)功能 实现方法

    我们在Winform支持网页通常增加WebBrowser控件实现,相当于内嵌浏览器浏览网页使用, 而此WebBrowser默认情况是文件拖入功能是不支持的, 如何才能支持呢.在这里介绍如何实现方法 一 ...

  8. 给Winform中的TabControl添加更现代的拖拽功能

    上周接到一个开发任务,大致是允许APP中的Tab拖动以成为一个独立Tab,脱离之前的TabControl,就是现在Web拖动标签页创建新窗口的功能,现在浏览器必备的功能,应该很简单,然而我司采用的Do ...

  9. winform中文本框添加拖拽功能

    对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...

随机推荐

  1. 用css3写出的倒三角形

    <!DOCTYPE html><html><head><meta charset="gb2312" /><title>无 ...

  2. MySQL-mysql_config_editor安全登录工具

    mysql_config_editor出现在mysql5.6.6以后的版本,可以给指定的连接和密码生成一个加密文件.mylogin.cnf,默认位于当前用户家目录下.通过该文件可以使用mysql.my ...

  3. Robot Framework 执行结果无法查看(tomcat部署)

    打开jenkins系统管理-命令行执行: System.setProperty("hudson.model.DirectoryBrowserSupport.CSP","& ...

  4. js实现倒计时+div下落

    全部由js动态生成结点,body内无内容 <style> #count{ position: absolute; text-align: center; width: 240px; hei ...

  5. (playbook)ubuntu下ansible安装docker

    --- - hosts: test sudo: yes vars: apt_packages_ca: - apt-transport-https - ca-certificates tasks: - ...

  6. How can I check the last time stats was run on Oracle without using OEM

    All of the following data dictionary tables have a LAST_ANALYZED column (replace * with USER/ALL/DBA ...

  7. CUDA学习之二:shared_memory使用,矩阵相乘

    CUDA中使用shared_memory可以加速运算,在矩阵乘法中是一个体现. 矩阵C = A * B,正常运算时我们运用 C[i,j] = A[i,:] * B[:,j] 可以计算出结果.但是在CP ...

  8. C 给定路径遍历目录下的所有文件

    在此之前需要了解 WIN32_FIND_DATA的结构 以及  FindFirstFile. FindNextFile原型以及用法注意事项传送门如下 https://msdn.microsoft.co ...

  9. 如何查看Ubuntu版本

    有时候需要查看一下系统安装的Ubuntu的版本,最简单的方式是输入lsb_release -a. whatis lsb_release输出:print distribution-specific in ...

  10. 深入了解 Flink 网络栈(二):监控、指标和处理背压

    在之前的文章中,我们从高级抽象到底层细节各个层面全面介绍了 Flink 网络栈的工作机制.作为这一系列的第二篇文章,本文将在第一篇的基础上更进一步,主要探讨如何监视与网络相关的指标,从而识别背压等因素 ...