<!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. PHP导出大量数据到excel表格

    /** * @creator Jimmy * @data 2016/8/22 * @desc 数据导出到excel(csv文件) * @param $filename 导出的csv文件名称 如date ...

  2. Ubuntu grub引导修复

    通过USB启动盘安装系统时将引导程序指定到/dev/sdb1,正常应该是指定到/dev/sdb才是,导致安装之后启动不起来. 重新通过USB启动盘进入试用界面,然后打开终端通过如下操作进行grub引导 ...

  3. java读取properties配置文件总结

    java读取properties配置文件总结 在日常项目开发和学习中,我们不免会经常用到.propeties配置文件,例如数据库c3p0连接池的配置等.而我们经常读取配置文件的方法有以下两种: (1) ...

  4. [UCSD白板题] Primitive Calculator

    Problem Introduction You are given a primitive calculator that can perform the following three opera ...

  5. Good Bye ACM

    ——记于2015.11.9 合肥 合肥区域赛结束了,长舒一口气,这次终于能成功退役了,以后可以不被学弟们吊打了Y(^_^)Y. 这次的比赛让我不禁联想起去年的上海现场赛,出题者防AK防得太过分了,又是 ...

  6. 转行IT行业的心路历程2

    2011/07-2016/12 11年毕业之后阴差阳错的到了宁波慈星股份,学习了针织机械.当初的想法很简单从沈阳到南方,因为南方小厂多机会多,因为我的目标就是当老板(呵呵,大部分的人的目标都是吧,现在 ...

  7. TSP旅行商问题的Hopfield求解过程

      连续型Hopfield在matlab中没有直接的工具箱,所以我们们根据Hopfield给出的连续行算法自行编写程序.本文中,以求解旅行商 问题来建立Hopfield网络,并得到解,但是该解不一定是 ...

  8. .NET环境下上传和下载Word文件

    一.上传Word文档或者其他文档 1.简单地上传文件的web服务方法如下 [WebMethod] public void UploadFile() { using (TransactionScope ...

  9. cobbler配置

    :ks脚本关闭pxe,这样就不会重复安装 sed -i 's/pxe_just_once: 0/pxe_just_once: 1/g' /etc/cobbler/settings 6:TFTP服务器 ...

  10. RHEL5.8配置开机自动挂载磁盘

    Linux环境中可以通过fstab来设置自动挂载磁盘或者共享存储,操作如下: fstab配置文件路径:/etc/fstab 每行代表一个存储位置. [root@appsrv01 ~]# cat /et ...