javscript 简单拖拽（drag）拖放事件、dataTransfer详解，垃圾桶效果

例子

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML5拖放API之回收站效果</title><style type="text/css">#container {border: 1px solid;width: 300px;height: 250px;float: left;}/* 文件夹样式 */#container div {background: url(image/folder.png) no-repeat;text-align: center;float: left;margin: 20px;width: 100px;height: 80px;line-height: 80px;}/*设置回收站样式*/div#recycle {width: 200px;height: 200px;float: left;text-align: center;background: url(image/recycle.jpg) no-repeat;margin: 30px;}</style></head><body><h3>HTML5拖放API之回收站效果</h3><hr /><!--文件展示区域--><div id="container"><div draggable="true" id="file1">文件1</div><div draggable="true" id="file2">文件2</div><div draggable="true" id="file3">文件3</div><div draggable="true" id="file4">文件4</div></div><!--回收站区域--><div id="recycle"></div><script type="text/javascript">var oDiv = document.getElementById("container").getElementsByTagName("div");var recycle = document.getElementById("recycle");for (var i = 0; i < oDiv.length; i++) {oDiv[i].ondragstart = function(ev) {//设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型  ev.dataTransfer.setData("text", ev.target.id);console.log("开始拖动")}}recycle.ondragover = function(ev) {//解禁当前元素为可放置被拖拽元素的区域ev.preventDefault();console.log("这是放到可拖拽区域生出的文字");}recycle.ondrop = function(ev) {//解禁当前元素为可放置被拖拽元素的区域ev.preventDefault();//获取当前被放置的元素id名称var id = ev.dataTransfer.getData("text");//根据id名称获取元素对象var folder = document.getElementById(id);//获取文件夹区域并删除该元素对象document.getElementById("container").removeChild(folder);// oDiv.parentNode.removeChild(oDiv); //删除指定节点,一般通过id选择删除,担当要删除的不是一个时就尽量不要这个}</script></body>
</html>
<!-- 1.将元素设置为可拖动draggable="true"，设置id2.在被拖拽元素上：开始拖动 document.ondragstart，只有设置了draggable="true"的才可以拖动，切拖动才有反应2.1 //设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型
3.拖拽区域，ondragover，ondrop解禁当前元素为可放置被拖拽元素的区域 -->

javscript 简单拖拽（drag）拖放事件、dataTransfer详解，垃圾桶效果相关推荐

HTML5 drag drop 拖拽与拖放简介
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1419 一.前面的话 ...
鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽
鼠标事件: onclick:在鼠标左健点击弹起之后触发的事件,即一次完整的鼠标点击过程.过程完成瞬间触发函数. onmousedown:事件会在鼠标按键被按下时发生. onmo ...
html dragover获得拖拽对象,突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是个非常普遍的功能.你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件.在HTM ...
html5拖拽换位效果演示,HTML5拖拽（二）--dataTransfer
从HTML5拖拽(一)我们得知:利用html5的dragable属性以及一些拖拽事件可以进行拖拽,但是无法获得所拖拽的数据.dataTransfer就应运而生,顾名思义,这是个传递数据的属性. 基础语 ...
拖拽生成html页面,简单拖拽即生成网页 VvvebJs
原标题:简单拖拽即生成网页 VvvebJs 导读VvvebJs是一个开源的网页拖拽自动生成的Java库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相 ...
UnityUGUI[Slider]拖拽抬起事件
因为最近项目需要做个拖拽条,但是跟正常的不太一样所以需要一个拖拽抬起事件,但是Slider并没给自带的拖拽事件,而且Slider好像重写了EventSystem的IEndDragHandler的方法 ...
理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
RecyclerView实现条目拖拽，左滑、右滑移除效果
对于android开发者来说RecyclerView应该已经很熟悉了,项目中基本都是使用RecyclerView来实现列表效果,这里要实现的是RecyclerView的条目拖拽.左滑.右滑移除效果,这 ...
plupload怎么设置属性_jquery上传插件：plupload事件参数说明详解
jquery上传插件:plupload事件参数说明详解 2018-12-01 本篇重点说明一下plupload的事件参数.并用2个例子说明一下绑定事件. 1.plupload参数说明: Browse_ ...
Android事件流程详解
Android事件流程详解网络上有不少博客讲述了android的事件分发机制和处理流程机制,但是看过千遍,总还是觉得有些迷迷糊糊,因此特地抽出一天事件来亲测下,向像我一样的广大入门程序员详细讲述an ...

javscript 简单拖拽（drag）拖放事件、dataTransfer详解，垃圾桶效果

例子

javscript 简单拖拽（drag）拖放事件、dataTransfer详解，垃圾桶效果相关推荐

最新文章

热门文章