步骤：

　　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. asp程序里，如何判断一个字符串中存在包含了另一个字符串？

    1.判断是否包含某某字符函数是:Instr()和InstrRev();2.具体使用如下:ab="abcdefgHTTP"你可以用Instr()或者InstrRev()来判断if I ...

  2. 【插件式框架探索系列】应用程序域（AppDomain）

    应用程序域(AppDomain)已经不是一个新名词了,只要熟悉.net的都知道它的存在,不过我们还是先一起来重新认识下应用程序域吧,究竟它是何方神圣. 应用程序域 众所周知,进程是代码执行和资源分配的 ...

  3. xshell连接中标麒麟

    中标麒麟: 1.首先肯定需要给虚拟机配置静态ip,让虚拟机作为独立的ip存在 https://www.cnblogs.com/judes/p/11776872.html 2.输入rpm -qa | g ...

  4. time zone list

    GMT UTC WET WET CET CET MET CET ECT CET EET EET MIT Pacific/Apia HST Pacific/Honolulu AST America/An ...

  5. 使用idea创建简单的webservice服务

     New project: 生成HelloWorld.wsdl: 配置好tomcat后还需要加入 Axis 的库: 启动后,访问http://localhost:8080/services: 点击He ...

  6. 常用OID(SNMP)

    系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...

  7. JAVA协程 纤程 与Quasar 框架

    ava使用的是系统级线程,也就是说,每次调用new Thread(....).run(),都会在系统层面建立一个新的线程,然鹅新建线程的开销是很大的(每个线程默认情况下会占用1MB的内存空间,当然你愿 ...

  8. Swift4.0复习Optional

    1.Optional基本使用: 当我们声明一个Optional对象时,无论该对象是在文件作用域还是在函数体内作为局部对象声明,如果不对它初始化,那么它的值默认为空(nil). // 声明a为Int类型 ...

  9. C# .NET 判断输入的字符串是否只包含数字和英文字母

    FROM :   https://www.cnblogs.com/ilookbo/p/4828722.html /// <summary> /// 判断输入的字符串是否只包含数字和英文字母 ...

  10. Flutter 一些常用第三方库、插件

    网络请求 http ^0.12.0+2 https://pub.dev/packages/http https://github.com/dart-lang/http 该软件包包含一组高级函数和类,可 ...