代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <style type="text/css">

        div > div{

            display: inline-block;

            padding: 10px;

            background-color: #aaa;

            margin: 3px;

        }

    </style>

    <body>

        <div style="width: 600px;border: 1px solid black;" id="like">

            <h2>可将喜欢的拖入收藏夹</h2>

            <div draggable="true" ondragstart="dsHandler(event)" id="zqj">中秋节</div>

            <div draggable="true" ondragstart="dsHandler(event)" id="gqj">国庆节</div>

            <div draggable="true" ondragstart="dsHandler(event)" id="yd">元旦</div>

            <div draggable="true" ondragstart="dsHandler(event)" id="cj">春节</div>

        </div>

        <div id="dest" style="width: 400px;height: 260px;border: 1px solid black;float: left;">

            <h2 ondragleave="return false;">收藏夹</h2>

        </div>

        <div id="gb" draggable="false" style="float: left;width: 58px;height: 120px;border: 1px solid black;">垃圾桶</div>

        <script>

            var like = document.getElementById('like');

            var dest = document.getElementById('dest');

            //开始拖动事件的事件监听器

            var dsHandler = function(evt){

                //将被拖动元素的innerHTML属性值设置成被拖动的数据

                //在进行拖放操作时，dataTransfer 对象用来保存，通过拖放动作，拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型

                //

                evt.dataTransfer.setData("text/plain","<item>"+ evt.target.innerHTML)

            }

            // 当把被拖动元素“放”到收藏夹上时激发该方法。

            dest.ondrop = function(evt){

                evt.preventDefault()

                var text = evt.dataTransfer.getData("text/plain")

                //如果text以<item>开头

                if(text.indexOf("<item>") == 0){

                    var newEle = document.createElement('div');

                    //以当前时间为该元素生成一个唯一的ID

                    newEle.id = new Date().getUTCMilliseconds();

                    //该元素内容为“拖”过来的数据

                    newEle.innerHTML = text.substring(6);

                    //设置该元素允许拖动

                    newEle.draggable = 'true'

                    //为该元素的开始拖动事件指定监听器

                    newEle.ondragstart = function(evt){

                        evt.dataTransfer.setData("text/plain","<remove>" + newEle.id)

                    }

                    dest.appendChild(newEle)

                    //移动到收藏夹,同时也把上面的移除可以注释看一下区别

                    let str = document.getElementById(newEle.id).innerHTML

                    switch (str){

                        case '中秋节':

                        like.removeChild(document.getElementById('zqj'))

                        break;

                        case '国庆节':

                        like.removeChild(document.getElementById('gqj'))

                        break;

                        case '元旦':

                        like.removeChild(document.getElementById('yd'))

                        break;

                        case '春节':

                        like.removeChild(document.getElementById('cj'))

                        break;

                    }

                }

            }

            // 当把被拖动元素“放”到垃圾桶上时激发该方法。

            document.getElementById('gb').ondrop = function(evt){

                var id = evt.dataTransfer.getData("text/plain");

                console.log(id)

                if(id.indexOf('<remove>') == 0){

                    console.log(id)

                    var target = document.getElementById(id.substring(8));

                    dest.removeChild(target);

                }

            }

            document.ondragover = function(evt){

                return false;

            }

            document.ondrop = function(evt){

                return false;

            }

        </script>

    </body>

</html>

效果图

js drag drop 收藏夹拖拽移除的简单例子的更多相关文章

  1. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  2. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  3. 基于svg.js实现对图形的拖拽、选择和编辑操作

    本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...

  4. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  5. D3.js 力导向图的拖拽（drag）与缩放（zoom）

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  6. 拖拽一个元素如此简单，mouse、drag、touch三兄弟的用处

    最近需要做一个投票活动,上传图片时需要拖拽.缩放来裁剪图片,vue的组件不少,不过自己动手才能丰衣足食,一味使用别人的组件实在难以进步,所以自己研究一番. 一.mouse.drag.touch傻傻分不 ...

  7. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  8. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  9. JS实现多Div模块拖拽功能

    空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...

随机推荐

  1. gitlab+gitlab-ci+docker自动化部署

    导言 本次测试用的是gitlab-ci,单纯与gitlab搭配而言,gitlab-ci较jenkins更加一体,顺畅. 主机1:192.168.100.151 gitlab 主机2:192.168.1 ...

  2. Java中的注解到底是如何工作的？

    作者:人晓 www.importnew.com/10294.html 自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分.开发过程中,我们也时常在应用代码中会看到诸如@Over ...

  3. linux Jenkins搭建

    安装jdk 下载jdk   解压 jdk1.8 vim /etc/profile export JAVA_HOME=/usr/local/java/jdk1.8.0_111export CLASSPA ...

  4. CSS3中的transform转换属性

    属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration 持续时间 transition-timing-f ...

  5. CSIC_716_20191217【事务、视图、触发器、存储过程、索引】

    事务: 事务保证对数据操作时的安全性,事务中的代码要么一起成功,要么一起失败. 事务以  start transaction  开始,中间可以写诸多个sql 语句对数据库进行操作, 以rollback ...

  6. PHP创建多级目录文件夹

    PHP创建多级目录的代码实例如下: <?php function create_dir($dirName) { // 去除输入目录名中的空格部分 $dirName = trim($dirName ...

  7. mac MAMP安装redis扩展

    一般情况下目录大概是一样的,只是php的版本不同,所以选择好自己对应的php版本目录即可 git clone https://github.com/nicolasff/phpredis.git cd ...

  8. redis - 环境搭建(转)

      一:简介(来自百科) redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zse ...

  9. Mate Translate的特色功能phrasebook 常用语手册介绍

    Mate Translate是Mac os系统上一款多国语言即时翻译工具,支持103种语言之间的即时互译,还可以在你的所有设备之间轻松同步.Mate Translate 不但推出了适应各个平台使用的客 ...

  10. FromBase64String(String)和Encoding.Default.GetBytes(String)

    今天突然被问FromBase64String(String)和Encoding.Default.GetBytes(String)有啥区别,我刚开始学C#对这个一脸懵逼,于是总结一下今天查资料的内容. ...