使用原生js实现简单的拖拽事件

<!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">

    可拖拽元素

</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();

            var data = event.dataTransfer.getData("Text");

            event.target.appendChild($("#" + data));

        }

        function dragstartHandle(event) {

            event.dataTransfer.setData("Text", event.target.id);

        }

        function preventDefault(event) {

            console.log(event.type);

            event.preventDefault();

        }

        function $(sel) {

            return document.querySelector(sel);

        }

    }

</script>

</body>

</html>

H5原生拖拽事件的更多相关文章

  1. h5原生拖拽

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

  2. HTML5原生拖拽事件的值传递(三dataTransfer对象)

    引用一篇博客,讲解的比较详细:http://www.tuicool.com/articles/j6Zbam

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

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

  4. Duilib嵌入CEF禁止浏览器响应拖拽事件

    转载:http://blog.csdn.net/liuyan20092009/article/details/53819473 转载:https://blog.csdn.net/u012778714( ...

  5. js之拖拽事件

    js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...

  6. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

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

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

  9. Android Launcher拖拽事件详解【android4.0--Launcher系列二】

    AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...

随机推荐

  1. 搭建本地Nuget服务器并使用NuGet Package Explorer工具打包nuget包

    1.什么是Nuget: 百度百科描述: Nuget是 ASP .NET Gallery 的一员.NuGet 是免费.开源的包管理开发工具,专注于在 .NET 应用开发过程中,简单地合并第三方的组件库. ...

  2. PIN的经验和技巧

    以前总是吧PIN码排序弄成:9876543210或0123456789, 有的路由PJ好久还没出密码,但还是PJ了3~4个,大多数是抓跑, 所以,还是建议大家先跑包,实在跑不出就来PIN, 一般人的设 ...

  3. 周末献礼 MyVoix2.0.js 麦克风波形绘制(一)

    最近更新了之前发布的语音识别框架MyVoix,加入了麦克风的波形分析效果.没有看过MyVoix介绍的同学请猛戳(传送门) Github地址 在新的更新中,波形分析可以绑定麦克风源,也可以单独配合别的音 ...

  4. js new Date().Format

    /** * * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符 * 年(y)可以用 1-4 ...

  5. Eclipse插件管理

    Eclipse 的特色之一,就是它的插件功能.可以说, Eclipse 是一个插件的大集合,所有的模块都以插件的形式存在.那么,究竟什么是插件呢? 插件( plug-in ),即 Eclipse 的功 ...

  6. Redis分布式缓存 教程以及DEMO

    原文地址:http://blog.csdn.net/qiujialongjjj/article/category/1800171 redis demo源码下载:http://download.csdn ...

  7. 写两个线程，一个对n每次加一，一个对n每次减一

    public class A{     private static Integer n = 0; }     public class B extends A implements Runnable ...

  8. 解决Xcode8 输出一对字符串问题

    在Product->Scheme->Edit Scheme->Run->Environment Variables下添加键:OS_ACTIVITY_MODE, 值:Disabl ...

  9. 【C#基础】CSA控件编写秘籍

    新建CSA控件 1.新建一个纯类,命名空间是: namespace SimPerfect.CSAControlLibrary.CSAControls 2.实现两个构造函数:无参和传Candy参数 pu ...

  10. 【C#基础】byte二进制数组转string

    //解析post请求数组返回的数组 //解码返回的二进制数组 public string DecodeBytes(byte[] c) { string html = string.Empty; try ...