h5原生拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Title</title>
<style>
#drag-el {
width: 100px;
height: 100px;
background-color: greenyellow;
}
#drop-el {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="drop-el"></div>
<div id="drag-el" draggable="true">
<!-- <img src="logo.png" alt=""> -->
被拖拽的元素
</div>
<script>
window.onload = function () { var dropEl = $('#drop-el');
var dragEl = $('#drag-el'); //设置关联数据
dragEl.addEventListener("dragstart", dragstartHandle); //禁止默认事件，使其可拖放，默认是不允许拖放的，除了图片和文字
dropEl.addEventListener("dragenter", preventDefault);
dropEl.addEventListener("dragover", preventDefault);
//鼠标释放，在拖放目标上接受数据并处理
dropEl.addEventListener("drop", dropHandle); function dropHandle(event) {
event.preventDefault();//在Firefox 3.5+中，放置事件的默认行为是打开被放到放置目标上的URL，因此需要取消drop事件的默认行为，阻止它打开URL
var data = event.dataTransfer.getData("Text");
event.target.appendChild($("#" + data));
console.log(event.target);
} function dragstartHandle(event) {
event.dataTransfer.setData("Text", event.target.id);
console.log(event.target);
} function preventDefault(event) {
console.log(event.type);
event.preventDefault();
} function $(sel) {
return document.querySelector(sel);
} }
</script>
</body>
</html>
分享一个很简单的实例：
英雄选择
选择英雄后代码：
效果如下：
h5原生拖拽的更多相关文章
- H5原生拖拽事件
使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- HTML5实战与剖析之原生拖拽(一拖拽历史概述)
提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...
- 自制一个H5图片拖拽、裁剪插件（原生JS）
前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...
- h5拖放-拖拽购物车
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生拖拽,拖放事件(drag and drop)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- H5之拖拽
步骤: 1.为将要拖拽的元素设置允许拖拽,并赋予dragstart事件将其id转换成数据保存: 2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置,并赋予drop事件进行元素的 ...
随机推荐
- 1211php面向对象
首先需要定义数组,$attr = array(直接给元素1,2,3)索引数组 关联数组 $attr = array("one"=>1,2,3) for($i=0;$i< ...
- Fiddler 工作原理
Fiddler工作原理: 就在在客户端与服务器端创建一个代理服务器: 在开启Fiddler后,Fiddler会自动窜改浏览器的代理,例如我们打开Fiddler,打开IE浏览器--设置--Interne ...
- Struts1 action重定向跳转 带参数
ActionForward forward = new ActionForward("kmRentalMain.do?method=view&fdId="+id);forw ...
- 四川软件人才网：打造四川最专业的IT人才招聘平台
四川软件人才网(www.tfsp.net),原名:天府软件人才网:为了更好的发展和拓展的业务需要,更名为:四川软件人才网,强力打造四川最专业的IT人才的招聘平台. 网站依托四川软件人才社区,微博,微信 ...
- css3 自定义动画（1）
<style> /*@-webkit-keyframes 动画名称 {} 用时:-webkit-animation:时间 动画名称; */ /* @-webkit-keyframes mo ...
- 将你的代码上传 Bintray 仓库（转）
转自:http://www.cnblogs.com/cpacm/p/5548241.html 在 Android Studio 中,我们通常可以利用 gradle 来导入别人写的第三方库,通常可以简单 ...
- Android studio 多渠道打包
一般用渠道的统计无非是用友盟或者其它之类的,今天就以友盟的为例吧. 渠道信息一般在 AndroidManifest.xml中修改以下值: <meta-data android:name=&quo ...
- NRF24L01--使用STM32F103
看了两天的24l01的相关资料了,一直有点模糊,今天下午感觉有点懂了,在板子上调试成功了,但是还没进行通讯测试.stm32和arduino进行通信还没成功 ,:( 先把stm32的NRF24L01配置 ...
- Ubuntu下设置（增加／删除）开机启动项
As said above, you have to edit /etc/xdg/autostart/ and either: remove the NoDisplay=true lines; or ...
- SAP HANA专题分析目录
针对HANA的关键技术领域, 做深度解析. 1. HANA开发规范 HANA 各种对象的应用解析.版本管理,开发规范. 2. HANA系统管理 用户.系统权限.数据权限的深度解析. HANA系统配置. ...