步骤：

　　1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；

　　2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。

<html>
<head>
<meta charset="utf-8">
<style>
.box1 {
width: 100px;
height: 100px;
border: 1px black solid;
margin-bottom: 20px;
background: lightblue;
}
.box2 {
width: 100px;
height: 100px;
border: 1px black solid;
background: lightcoral;
}
</style>
</head>
<body>
<!-- 参数要传入event对象 -->
<div class="box1" ondragover="allowdrop(event)" ondrop="drop(event)">
<img src="img/2.jpg" alt="00" draggable="true" ondragstart="drag(event)" id="drag" width="50" height="50">
<span>我是盒子一</span>
</div>
<div class="box2" ondragover="allowdrop(event)" ondrop="drop(event)">
<span>我是盒子二</span></div>
<script>
function allowdrop(e) {
e.preventDefault();
}
function drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
function drag(e) {
e.dataTransfer.setData("text", e.target.id);
}
</script>
</body>
</html>

H5之拖拽的更多相关文章

  1. 自制一个H5图片拖拽、裁剪插件（原生JS）

    前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...

  2. h5原生拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. h5拖放-拖拽购物车

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. h5拖拽上传图片

    h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...

  6. H5 拖拽,一个函数搞定,直接指定对象设置可拖拽

    页面上,弹个小窗体,想让它可以拖拽,又不想 加载一堆js,就简单的能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了! 1. 先来说说 H5的 拖拽 在 HTML5 中,拖放是标准的一部分,任何元 ...

  7. React 实现拖拽功能

    实现效果:(可戳 https://codepen.io/wenr/pen/EGEQxp 查看) 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感 ...

  8. 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  9. HTML5拖拽——将本地文件拖拽到网页中显示

    HTML5标准中的提供的用于文件输入输出(I/O)的对象 File: 代表一个文件对象 FileList: 代表一个文件列表,类数组对象 FileReader 用于从文件中提取内容 FileWrite ...

随机推荐

  1. 如何在 Linux 中更改 swappiness

    交换空间是 RAM 内存已满时使用的硬盘的一部分.交换空间可以是专用交换分区或交换文件.当 Linux 系统耗尽物理内存时,非活动页面将从 RAM 移动到交换空间.Swappiness 是一个 Lin ...

  2. java-mybaits-016-mybatis知识点StatementType

    1.statementType 在mapper文件中可以使用statementType标记使用什么的对象操作SQL语句. statementType:标记操作SQL的对象 要实现动态传入表名.列名,需 ...

  3. layui时间控件闪退的问题

    项目上线,发现后台管理系统layui的子页面出现时间控件闪退的问题,根本选取不到时间. 其原因是:如果出现页面找到多个节点,只有第一个节点能正常使用后面的节点都会闪退,可以理解为目前laydate不支 ...

  4. Qt编写气体安全管理系统5-数据监控

    一.前言 本项目对设备的监控有四种视图模式,可以任意切换,数据监控.地图监控.设备监控.曲线监控,其中数据监控是最常用的,所以在主界面导航中也排在第一位,综合观察分析了很多气体安全或者组态监控软件,大 ...

  5. 邪淫真正的可怕危害 (转自学佛网：http://www.xuefo.net/nr/article54/544414.html)

    邪淫真正的可怕危害 邪淫的害处可能很快就显现,也可能是逐渐的表现出来.但往往后者的害处更大.因为当积累了多年的邪淫果报一旦显现,后悔就已经晚了. 我本人就是一个很好的例子.回想自己这40多年的日子,邪 ...

  6. C#图片水印类

    这个是学习用的呃,主要看一下水印在修改图片中距左边的宽度和高度是杂弄的就哦客了. using System; using System.Collections.Generic; using Syste ...

  7. WPF ComboBox(转)

    WPF ComboBox 创建一个ComboBox控件,并设置ComboBox控件的名称,高度,宽度.及设置ComboBox的垂直和水平对齐. <ComboBox Name="Comb ...

  8. 2019年Java中高级面试题总结（8）

    116.什么时候使用访问者模式? 访问者模式用于解决在类的继承层次上增加操作,但是不直接与之关联.这种模式采用双派发的形式来增加中间层. 117.什么时候使用组合模式? 组合模式使用树结构来展示部分与 ...

  9. 高级UI-事件传递

    事件传递在Android中有着举足轻重的作用,那么事件的传递在Android中又是怎么样实现的呢,在这里我们将进一步探讨Android的事件传递机制 从一个例子入手 首先是一个简单的onTouch和o ...

  10. 高性能最终一致性框架Ray之基本功能篇

    一.Event(事件) Event是Actor产生的记录状态变化的日志,由StateId(状态Id),UID(幂等性控制),TypeCode(事件类型),Data(事件数据),Version(事件版本 ...