步骤：

　　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. Dart对象和类

    /* 面向对象编程(OOP)的三个基本特征是:封装.继承.多态 封装:封装是对象和类概念的主要特性.封装,把客观事物封装成抽象的类,并且把自己的部分属性和方法提供给其他对象调用, 而一部分属性和方法则 ...

  2. Dart 变量、常量和命名规则

    /* Dart 变量: dart是一个强大的脚本类语言,可以不预先定义变量类型 ,自动会类型推导 dart中定义变量可以通过var关键字可以通过类型来申明变量 如: var str='this is ...

  3. IDEA Git 修改后的文件无法Commit

    转自:https://blog.csdn.net/moneyshi/article/details/81298861 因对IDEA使用不熟,在使用和配置GIT的时候,可能哪里配置错误,导致我一直无法使 ...

  4. datax实例——全量、增量同步

    一.全量同步 本文以mysql -> mysql为示例: 本次测试的表为mysql的系统库-sakila中的actor表,由于不支持目的端自动建表,此处预先建立目的表: CREATE TABLE ...

  5. Java中使用Socket连接判断Inputstream结束，java tcp socket服务端，python tcp socket客户端

    最近在试着用java写一个socket的服务器,用python写一个socket的客户端来完成二者之间的通信,但是发现存在一个问题,服务器方面就卡在读取inputsream的地方不动了,导致后面的代码 ...

  6. online学习和offline学习

    参考:https://blog.csdn.net/a133521741/article/details/79221015 解释: (1)offline学习:每次训练完一个batch后再更新参数: (2 ...

  7. 树莓派3B安装arm64操作系统

    pi64 pi64基于Debian 9,地址如下https://github.com/bamarni/pi64 烧录过程还是用SDFormatter格式化,用Win32DiskImager写入即可,没 ...

  8. PHP比较两个版本的方法

    PHP比较两个版本的方法 写app接口经常要用到 PHP接口的版本和app里面的版本做比较 如果app版本低于接口版本 那么就要提示他升级 <pre><?php/** * 版本处理类 ...

  9. dotnet core use RabbitMQ

    安装RabbitMQ 自从使用了Docker之后,发现Docker真的是比虚拟机好用啊, 因此我这里在Docker里面创建一个RabbitMQ容器. 这里注意获取镜像的时候要获取management版 ...

  10. LeetCode 199. 二叉树的右视图(Binary Tree Right Side View)

    199. 二叉树的右视图 199. Binary Tree Right Side View 题目描述 给定一棵二叉树,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值. Giv ...