使用原生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. 【从零开始学BPM,Day1】工作流管理平台架构学习

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第一天课程] Step 1 软件下载:H3 BPM10.0全开 ...

  2. Linux信号

    信号本质上就是一个软件中断,它既可以作为两个进程间的通信的方式, 更重要的是, 信号可以终止一个正常程序的执行, 通常被用于处理意外情况 ,* 信号是异步的, 也就是进程并不知道信号何时会到达 $ki ...

  3. 如何让Android字体自适应屏幕分辨率

    在不同的分辨率下,Android字体大小怎么自适应分辨率的变化? 假设需要适应320x240,480x320分辨率.在res目录下新建文件夹values-320x240, values-480x320 ...

  4. PHP 自 5.2 到 5.6 中新增的功能详解

    截至目前(2014.2), PHP 的最新稳定版本是 PHP5.5, 但有差不多一半的用户仍在使用已经不在维护 [注] 的 PHP5.2, 其余的一半用户在使用 PHP5.3 [注].因为 PHP 那 ...

  5. 【转】opencv检测运动物体的基础_特征提取

    特征提取是计算机视觉和图像处理中的一个概念.它指的是使用计算机提取图像信息,决定每个图像的点是否属于一个图像特征.特征提取的结果是把图像上的点分为不同的子集,这些子集往往属于孤立的点.连续的曲线或者连 ...

  6. Unity UI和引用的管理中心

    我们来谈谈Unity的UI, 通常会写一些UI页面,当A页面需要去操作B页面的时候. 至少要获取B页面的引用吧! 一般新人都会在组件的写一个public GameObject UIB页面的属性, 然后 ...

  7. MSSQL数据库统计所有表的记录数

    今天需要筛选出来库中行数不为零的表,于是动手写下了如下存储过程. CREATE PROCEDURE TableCount AS BEGIN SET NOCOUNT ON ),RowsCount INT ...

  8. 谈Web应用系统的可维护性

           每一个软件开发人员都十分清楚, 当软件构建得越来越复杂时, 可维护性就成了一个很突出的问题. 如何在构造软件系统的过程中始终保持可控制的可维护性呢?          一. 整体组织   ...

  9. Twitter Bootstrap JavaScript插件

    Twitter Bootstrap JavaScript插件本文收集了10款非常不错的JavaScript Twitter bootstrap扩展插件,利用Boostrap开发者可以节省大量的时间修复 ...

  10. drf6 权限和频率控制组件

    对某件事情决策的范围和程度,我们叫做权限,权限是我们在项目开发中非常常用到的. DRF框架给我们提供的权限组件 权限组件 之前DRF的版本和认证,知道了权限和频率跟版本认证都是在initial方法里初 ...