html5的拖拽dragAPI（如果看了API不懂，看看那三个案例就会恍然大悟）
1.拖拽和释放定义：
拖拽：Drag;
释放：Drop;
2.源对象和目标对象：
3.相关API:
ondragstart:源对象开始被拖动
ondrag:源对象被拖动的过程中
ondragend:源对象被拖动结束
ondragenter:目标对象被源对象拖动进入
ondragover:目标对象被源对象悬浮在上面
ondragleave:源对象拖动着离开了目标对象
ondrop:源对象拖动着在目标对象上方松手
4.拖动的源对象和目标对象之间的数据传递：
源对象数据保存：e.data.Transfer.setData(k,v)//k-v必须都是string类型
目标对象获取数据：e.data.Transfer.getData(k,v)
案例一：小猫咪随着鼠标移动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖动小熊</title>
<style>
body{
margin:0;
position: relative;
}
img{
position:absolute;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<h3>随着鼠标拖动而移动的小猫咪</h3>
<img id="cat" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438350926&di=d40ad5be9fac73fbcebfcbec85a88739&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D88c8f471f9039245a1e0e90bb2a488f4%2F9a504fc2d5628535aedbd09d95ef76c6a7ef6356.jpg" alt=""/>
<script>
var cat = document.getElementById('cat');
cat.ondragstart = function(e){
console.log('cat开始移动');
offsetX = e.offsetX;
offsetY = e.offsetY;
};
cat.ondrag = function(e){
// console.log('事件源cat正在拖动中');
var x = e.pageX;
var y = e.pageY;
console.log(x + '-' +y);
if(x === 0 && y === 0){//不处理最后一刻x,y都为0 的情景
return
};
x -= offsetX;
y -= offsetY;
cat.style.left = x+ 'px';
cat.style.top = y + 'px';
}
cat.ondragend = function (e) {
console.jlog('cat源对象拖动结束')
}
</script>
</body>
</html>
案例二：淘宝购物车删除商品效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小喵咪喂给大黄鱼</title>
<style>
body{
text-align: center;
} img{
width: 80px;
height: 80px;
border-radius:100%;
}
#fish{
margin-top: 200px;
opacity: .2;
}
</style>
</head>
<body>
<h3>小喵咪拖到大黄鱼上面的时候消失（删除小喵咪）</h3>
<img class="cat" id="cat1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537439299088&di=4abcae9fe10a919fd23695be63506d91&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c2e05777054e0000012e7eceda20.jpg%401280w_1l_2o_100sh.jpg" alt="">
<img class="cat" id="cat2" src="http://img4.imgtn.bdimg.com/it/u=2404190189,262583459&fm=26&gp=0.jpg" alt="">
<img class="cat" id="cat3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537439359473&di=94af89f7165210577af8d9682ca7b90b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F031763d577b43b30000018c1bcaaa23.jpg" alt="">
<br>
<img id="fish" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2614718913,3898275106&fm=26&gp=0.jpg" alt="">
</body>
<script>
//要想从数据库中删除猫咪，就需要猫咪的图片地址是后台传值过来的，然后循环遍历在页面中，当拖动删除的时候，删除掉数据库中的数据即可；然后刷新页面
var cat = document.getElementsByClassName('cat')//找到所有的猫咪
for(var i = 0;i<cat.length;i++){
var catSingle = cat[i];
catSingle.ondragstart = function(e){//循环遍历猫咪，当dragstart拖动开始的时候，setData设置他的id到e.dataTransfer中
e.dataTransfer.setData('catId',this.id);
}
}
fish.ondragenter = function(){//当如到鱼种时候，让鱼的透明度为1；
console.log('已经拖入')
fish.style.opacity ='1';
}
fish.ondragleave = function () {//拖动离开鱼的时候
console.log('拖动离开');
fish.style.opacity ='.2';
}
fish.ondragover = function (e) {//拖动悬浮在鱼上
e.preventDefault()
}
fish.ondrop = function(e){//拖动放开时候；获取拖动开始时候设置的数据；然后从dom结构中移除；
console.log('放开拖动')
fish.style.opacity = '.2'
var id = e.dataTransfer.getData('catId')
console.log(id)
var dragId = document.getElementById(id);
dragId.parentNode.removeChild(dragId)
} </script>
</html>
案例三：将本地图片图拖动放置到浏览器中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖动一张图片到浏览器中</title>
<style>
body{
text-align: center;
}
#container {
border: 1px solid #aaa;
border-radius: 3px;
padding: 10px;
margin: 10px;
min-height: 400px;
}
</style>
</head>
<body> <h1>拖放API的扩展知识</h1>
<h3>请拖动您的照片到下方方框区域</h3>
<div id="container"></div> <script>
var container = document.getElementById('container')
document.ondragover = function(e){
e.preventDefault()
}
document.ondrop = function(e){
e.preventDefault()
}
container.ondragover = function(e){
e.preventDefault()
}
container.ondrop = function(e){
var paper = e.dataTransfer.files[0];
var file = new FileReader();
file.readAsDataURL(paper)
file.onload = function(){
console.log('读取文件完成')
console.log(file.result)
var img = new Image();
img.src =file.result;
container.appendChild(img)
}
}
</script>
</body>
</html>
注意事项：浏览器问题：当ondragover触发时，ondrop会失效，因此需要阻止ondragover的默认事件；
5.HTML5的新增文件操作对象
file:代表一个文件对象
filelist:代表一个文件列表对象；类数组；
fileReader:用于从文件中读取数据
FileWriter:用于向文件中写出数据；
相关函数：
div.ondrop = function(e){
var f = e.dataTransfer.files[0]; //找到拖放的文件
var fr = new FileReader(); //创建文件读取器
fr.readAsURLData(f); //读取文件内容
fr.onload = function(){ //读取完成
img.src = fr.result; //使用读取到的数据
}
}
html5的拖拽dragAPI（如果看了API不懂，看看那三个案例就会恍然大悟）的更多相关文章
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- HTML5之拖拽(兼容IE和非IE)
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- Nodejs express、html5实现拖拽上传
一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs ...
- HTML5 -canvas拖拽、移动 绘制图片可操作移动，拖动
关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...
- Html5+NodeJS——拖拽多个文件上传到服务器
实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...
随机推荐
- std::bind 详解及参数解析
// Bind_std_function.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> ...
- 【LeetCode】173. Binary Search Tree Iterator (2 solutions)
Binary Search Tree Iterator Implement an iterator over a binary search tree (BST). Your iterator wil ...
- Linux按照CPU、内存、磁盘IO、网络性能监测【转载】
本文转载地址:https://my.oschina.net/chape/blog/159640 系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估.监 ...
- Linux下网卡混杂模式设置和取消
工作中发现一个网卡工作状态不对了,查看了一下,发现这个网卡和正常工作的网卡 信息不一样,它显示的居然是混杂模式,而正常工作的是 running 模式 ,所以来了解下混杂模式怎么取消... 下文来自 ...
- Swift 类型检查与类型转换
前言 在 Swift 语言中一般使用 is 关键字实现类型检查,使用 as 关键字实现类型转换,除此之外还可以通过构造器和方法来实现类型转换. 1.类型检查 1.1 使用 is 检查 类型检查操作符 ...
- .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片
.NET压缩图片保存 需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...
- golang学习笔记 --- goroutine
package main import ( "fmt" "io" "io/ioutil" "net/http" &quo ...
- Oracle 12C -- 网络性能调优
1.传输数据压缩 网络性能主要受两方面影响:bandwidth和data volume. 在网络层对数据进行压缩,可以减少对网络带宽的需求.而且对应用是透明的. 如果是CPU是瓶颈时开启网络层数据压缩 ...
- Android APK安装完成自动删除安装包
需要实现此功能,一般实际开发是在自动版本更新上,当更新完开始自动安装完毕后,删除内存卡里的安装包.实现方式很简单,监听应用广播,获取内存卡下的文件,删除! 1.监听广播 package com.exa ...
- Android lrucache 实现与使用（Android内存优化）
什么是LruCache? LruCache实现原理是什么? 这两个问题其实可以作为一个问题来回答,知道了什么是 LruCache,就只然而然的知道 LruCache 的实现原理:Lru的全称是Leas ...