HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 80px;
}
#fir{background-color: blue; }
#sec{background-color: black;}
#thr{background-color: chartreuse;}
#d_img{width: 200px;height: 80px;}
</style>
<script type="text/javascript">
var cont=;
var in_moving=;
/**--01--*/
function f_ondragstart(e){
document.getElementById("sp_start").innerHTML= e.target.id+":被拖元素，开始被拖动";
//被拖动，就将拖动的元素，存入（setData）dataTransfer里面：键值对
e.dataTransfer.setData("who", e.target.id);
//--04--设置拖放过程中允许的效果（ondragstart中设置）
e.effectAllowed="all";
}
function f_ondrag(e){
cont++;
document.getElementById("sp_moving").innerHTML= e.target.id+":被拖元素，被拖动过程中:"+cont;
}
function f_ondragenter(e){
document.getElementById("sp_in").innerHTML= "进入:"+e.target.id;
}
/**--02--*/
function f_ondragover(e){
//进入，就设置可以拖放进来（设置不执行默认：【默认的是不可以拖动进来】）
e.preventDefault();
//--05--设置具体效果
e.dataTransfer.dropEffect="copy";
document.getElementById("sp_in_moving").innerHTML="进入:"+ e.target.id+":"+in_moving;
}
function f_ondragleave(e){
document.getElementById("sp_leave").innerHTML="离开:"+ e.target.id
}
/**--03--*/
function f_ondrop(e){
// document.getElementById("sp_on").innerHTML="到达目标:"+ e.target.id;/**/
//设置不执行默认：【默认的是不可以拖动进来】
e.preventDefault();
var who= e.dataTransfer.getData("who");
//添加子节点
document.getElementById(e.target.id).appendChild(document.getElementById(who)); document.getElementById("sp_on").innerHTML=who+":到达目标:"+ e.target.id;
}
function f_ondragend(e){
document.getElementById("sp_end").innerHTML="结束拖放:"+ e.target.id;
}
</script>
</head>
<body>
<!--拖放：
拖动的对象，需要设置draggable属性为true(draggable="true"),
a元素需要href，img元素需要src。
、被拖对象：dragstart事件，被拖动的元素，开始拖放触发
、被拖对象：drag事件，被拖放的元素，拖放过程中
、经过对象：dragenter事件，拖放过程中鼠标经过的元素，被拖放的元素“开始”进入其它元素范围内（刚进入）
、经过对象：dragover事件，拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直)
、经过对象：dragleave事件，拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围
、目标地点：drop事件，拖放的目标元素，其他元素被拖放到本元素中
、被拖对象：dragend事件，拖放的对象元素，拖放操作结束
-->
</body>
<div id="fir" ondragenter="f_ondragenter(event)" ondragover="f_ondragover(event)" ondragleave="f_ondragleave(event)" ondrop="f_ondrop(event)">
</div> <div id="sec" ondragenter="f_ondragenter(event)" ondragover="f_ondragover(event)" ondragleave="f_ondragleave(event)" ondrop="f_ondrop(event)">
</div> <div id="thr" ondragenter="f_ondragenter(event)" ondragover="f_ondragover(event)" ondragleave="f_ondragleave(event)" ondrop="f_ondrop(event)">
</div> <br> <img id="d_img" src="imgs/img.jpg" draggable="true" ondragstart="f_ondragstart(event)" ondrag="f_ondrag(event)" ondragend="f_ondragend(event)"> <br>
<span id="sp_start"></span>
<br>
<span id="sp_moving"></span>
<br>
<span id="sp_in"></span>
<br>
<span id="sp_in_moving"></span>
<br>
<span id="sp_leave"></span>
<br>
<span id="sp_on"></span>
<br>
<span id="sp_end"></span>
</html>
HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性的更多相关文章
- dragstart drag dragend dragenter dragover dragleave drop
dragstart drag dragend dragenter dragover dragleave drop 前端框架层出不穷,网页上的效果越来越绚丽,制作绚丽的效果的成本越来越低,其中有种拖 ...
- HTML5 拖动
触发的事件有:dragstart事件.drag事件和dragend事件. 按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件.这时候光标变成”不能放”符号(圆环中有一条反斜线 ...
- HTML5拖拽/拖放(drag & drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- html5拖动文件上传
使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...
- HTML5拖拽功能drag
1.创建拖拽对象 给需要拖拽的元素设置draggable属性,它有三个值: true:元素可以被拖拽:false:元素不能被拖拽:auto: 浏览器自己判断元素是否能被拖拽. 2.处理拖拽事件当我们拖 ...
- 根据HTML5的新方法 drag & drop 方法实现表格拖拽实例
上一次学习了html5的drag和drop方法,传送门 就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详 ...
- html5 拖拽(drag)和f放置(drop)
知识要点 HTML5 (drag&drop) API (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...
- HTML5（四）Drag and Drop
HTML5 拖放(Drag 和 Drop) 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素 ...
随机推荐
- [BZOJ4029][HEOI2015] 定价
Description 在市场上有很多商品的定价类似于 999 元.4999 元.8999 元这样.它们和 1000 元.5000 元和 9000 元并没有什么本质区别,但是在心理学上会让人感觉便宜很 ...
- Redis的PHP操作手册(转)
String 类型操作 string是redis最基本的类型,而且string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象 $redis-> ...
- About_PHP_文件的上传
在form表单中,我们上传文件用的是:<input type="file" name="fileUpload" />,当然,光是这样是不行的. 我们 ...
- showModalDialog 刷新问题,在页面中跳转问题
showModalDialog 刷新问题 ,在页面中跳转问题 <html><head> <base target="_self" >< ...
- javascript继承机制的设计思想(ryf)
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- zk textbox 更改字体大小及高度
.z-textbox{ height:100px; font-size:30px; padding:20px; } <textbox/> 效果如下:
- JS动态引入js,CSS——动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...
- 关于java.lang.NoSuchMethodError: android.widget.RelativeLayout.setBackground的解决办法
今天用一个安卓4.0.4版本的手机测试手上的项目,发现logcat弹出这样一个提示“java.lang.NoSuchMethodError: android.widget.RelativeLayout ...
- 第一个python程序
一个python程序的两种执行方式: 1.第一种方式是通过python解释器: cmd->python->进入python解释器->编写python代码->回车. 2.第二种方 ...
- 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...