H5 _拖放使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放API</title>
<style>
[id='dragme']{
width: 100px;
height: 100px;
color: #fff;
text-align: center;
line-height: 100px;
background-color:#aaa;
user-select: none;
cursor:pointer;
}
[id='text']{
width: 300px;
height: 300px;
margin-top: 20px;
}
.border{
border: 1px solid #aaa;
border-radius:.2em;
box-shadow:2px 2px 3px #aaa;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<div class="border" id="dragme" draggable="true">请拖放</div>
<div class="border" id="text"></div>
</div>
<script>
var page = {
init : function(){
this.draggable();
this.perDefault();
},
draggable : function(){
var source = document.getElementById('dragme'),
dest = document.getElementById('text'),
dragIcon = document.createElement('img'),
n = 1;
dragIcon.src = '';
//拖放开始
source.addEventListener('dragstart', function(ev){
//向dataTransfer追加数据
var dt = ev.dataTransfer;
dt.effectAllowed = 'all';
dt.setData("text/plain", n);
//自定义拖放图标
dt.setDragImage(dragIcon, -10, -10);
},false);
//拖放结束
dest.addEventListener('dragend', function(ev){
ev.preventDefault();
},false)
//被拖放
dest.addEventListener('drop', function(ev){
n++;
//从dataTransfer对象获取数据
var dt = ev.dataTransfer,
text = dt.getData("text/plain");
dest.textContent += text+' ';
//阻止默认行为(拒绝被拖放)
ev.preventDefault();
//阻止事件冒泡
ev.stopPropagation();
},false)
//被拖放的元素在本元素范围内移动
//dropEffect拖放时的视觉效果/图标
dest.addEventListener("dragover", function(ev){
var dt = ev.dataTransfer;
dt.dropEffect = 'link';
ev.preventDefault();
},false)
},
//设置页面属性，阻止默认行为
perDefault : function(){
document.ondragover = function(e){
e.preventDefault();
}
document.indrop = function(e){
e.preventDefault();
}
}
}
window.onload = page.init();
</script>
</body>
</html>
H5 _拖放使用的更多相关文章
- h5 简单拖放
最新的HTML5标准为所有的html元素规定了一个draggable属性,它表明了元素是否可以拖动,默认情况下,图像,链接,选中的文字是可以拖动的,因为他们的draggable属性被自动设置为true ...
- 【02】一个实现h5的拖放的整个过程-魔芋
[02]拖放的整个过程-魔芋 01,创建2个元素,一个为拖放元素dragEle,一个是存放的元素targetEle.添加一些样式. <div class="dragEle&qu ...
- h5的拖放（drag和drop）
被拖曳元素发生的事件=== ondragstart:拖拽元素开始被拖拽的时候触发 ondragend:拖拽完成后触发 目标元素发生的事件=== ondragenter:拖曳元素进入目标元素的时候触发 ...
- H5 _浏览器通知功能使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5 拖放事件详解
拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转 ...
- 多个tab切换传参
var _ =peopleslive.h5; _.main=function(){ //集赞排名1 $('#tab1 .tab_nav').find('li').click (function() { ...
- h5drag事件
在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发ondragend - 用户完成元素拖动后触发释放目标时触发的事件:ondrag ...
- js 2017
JS面向对象 <script> function num(val) { return val * 8 } function Index(name, age) { this.name = n ...
- 我拖拖拖--H5拖放API基础篇
不要搞错,本文不是讲如何拖地的.看过<javascript精粹>朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了.最近在园子见 ...
随机推荐
- cnpm下载包与npm版本不一致的问题解决
参考链接:https://www.jianshu.com/p/949b4e0ae190
- 结合jira搭建自动化测试平台
mysql 语句查看 python manage.py sqlmigrate your_app_name 0001 代码如下 #coding=utf8 #https://jira.readthedoc ...
- stylus 实践
音乐分享: Broken Back - <Halcyon Birds> —————————————————————————————————————————————————————————— ...
- MVC或WebAPI发布后报错404问题的总结
在MVC项目或者webAPI项目发布之后有时会发生404错误.针对这种错误的解决办法: 解决办法1(不推荐):在webconfig中 <system.webServer> 节点下 添加 & ...
- Maven Install报错：Perhaps you are running on a JRE rather than a JDK?
我用的是idea,解决办法是:安装jdk,配置环境变量
- tensorflow调试tfdbg
tensorflow调试工具:tfdbg 使用教程:https://www.cnblogs.com/hellcat/articles/7812119.html 遇到的错误信息及解决方案 ModuleN ...
- python3中的type与object
在python中,一切皆对象,应该怎么理解呢?? 先来看几个例子: [root@localhost ~]# python3 Python 3.6.3rc1 (default, Feb 26 2018, ...
- 2019年春季学期第三周作业 ----PTA作业
题目 判断上三角矩阵 上三角矩阵指主对角线以下的元素都为0的矩阵:主对角线为从矩阵的左上角至右下角的连线. 本题要求编写程序,判断一个给定的方阵是否上三角矩阵. 输入格式: 输入第一行给出一个正整数T ...
- 2-3、配置Filebeat
配置Filebeat 提示:Filebeat modules为常见的日志格式提供了最快的入门操作. 如果要使用Filebeat模块,请跳过本节,包括剩余的入门步骤,并直接转到快速入门:Quick st ...
- CentOS7没有eth0网卡
本人刚刚进去运维圈,写写博客,记录一下自己日常工作学习中的各种问题,方便自己,方便他人. CentOS7系统安装完毕之后,输入ifconfig命令发现没有eth0,不符合我们的习惯.而且也无法远程ss ...