<!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原生拖拽的更多相关文章

  1. H5原生拖拽事件

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

  2. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  3. HTML5实战与剖析之原生拖拽(一拖拽历史概述)

    提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...

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

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

  5. h5拖放-拖拽购物车

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

  6. 原生拖拽,拖放事件(drag and drop)

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

  7. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  8. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  9. H5之拖拽

    步骤: 1.为将要拖拽的元素设置允许拖拽,并赋予dragstart事件将其id转换成数据保存: 2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置,并赋予drop事件进行元素的 ...

随机推荐

  1. 51nod 1428 活动安排问题(优先队列)

    1428 活动安排问题 首先按照开始时间从小到大排序. 其实只要维护一个结束时间的最小堆,每次比较开始时间和堆中最小时间的大小,如果比它大就放入堆中并且时间就要变成当前任务的结束时间, 否则就要新开一 ...

  2. 在idea中mybatis错误(1)

    错误提示为: ### Error building SqlSession.### The error may exist in cn/qd/mybatis/map/productMapper.xml# ...

  3. nexus2.1.2的配置

    最近在学习maven,逐渐接触到私服的搭建,也就着手学习使用nexus了,在http://www.sonatype.org/nexus/go网站上nexus最新版本的是,不过版本要同jvm的版本匹对, ...

  4. angular JS 做分页

    在网上找了一天,连一个像样点的分页DEMO都没找到,晕死了.大部分都是相互抄,有各种各样的问题,要不是代码有BUG,要不就是解释不明,GITHUB上下载下来的总是乱糟糟的.心累.

  5. 站点图标favicon.ico

    favicon.ico图标: 网站的favicon.ico需要一次额外的http请求,无论你是否有在html里面添加 link链接 <link rel="shortcut icon&q ...

  6. python3下安装Django

    1.下载python3 https://www.Python.org/ 我下载的是Python3.5.1 选的 Windows x86-64 executable installer 2. 打开cmd ...

  7. bootstrap框架 导航条组件使用

    本文记载boot 导航条组件使用方法 导航条组件 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展 ...

  8. REST,RESTful

    REST(Representational State Transfer)描述了一个架构样式的网络系统. RESTful架构,就是目前最流行的一种互联网软件架构.结构清晰.符合标准.易于理解.扩展方便 ...

  9. 241. Different Ways to Add Parentheses

    241. Different Ways to Add Parentheses https://leetcode.com/problems/different-ways-to-add-parenthes ...

  10. 用ADMM求解大型机器学习问题

    [本文链接:http://www.cnblogs.com/breezedeus/p/3496819.html,转载请注明出处] 从等式约束的最小化问题说起:                       ...