代码

<!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. Ubuntu apt-get 更新/查看软件

    ubuntu 升级软件: sudo apt-get update 更新源 sudo apt-get upgrade 更新已安装的包 sudo apt-get dist-upgrade 升级系统 ubu ...

  2. List、Map、Set三个接口存取元素时，各有什么特点

    List接口以特定索引来存取元素,可以有重复元素 Set接口不可以存放重复元素(使用equals方法区分是否重复) Map接口保存的是键值对(key-value-pair)映射,映射关系可以是一对一或 ...

  3. PAT 乙级练习题1002. 写出这个数 (20)

    1002. 写出这个数 (20) 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10100. 输出格式 ...

  4. 解决windows10 安装不了.net 3.5问题

    百度链接附上 详细操作参考使用说明 链接: https://pan.baidu.com/s/1vLXfuxP7qxujCFVB7xjxdg 提取码: seeu 如果还不能按照参考说明的安装 请直接在安 ...

  5. rabbitmq AmqpClient 使用Fanout 交换机投递与接收消息，C++代码示例

    fanout交换器重点内容非常简单.它只会将接收到的所有消息广播发送到它所知道的所有队列. 投递消息到交换机: #include "SimpleAmqpClient/SimpleAmqpCl ...

  6. 通过lua进行nginx的权限控制

    nginx_lua的安装 nginx使用luajit进行编译安装 使用openresty进行yum安装 openresty中将lua和nginx进行封装,详情可查看openresty官网 openre ...

  7. 注册Bean

    <spring源码深度解析>笔记 1.给容器中注册组件 (1).包扫描+组件注解: (2).@Bean(导入第三方包里面的组件): (3).@Import给容器中快速的导入一个组件: 2. ...

  8. Python爬虫实战—— Request对象之header伪装策略

    在header当中,我们经常会添加两个参数--cookie 和 User-Agent,来模拟浏览器登录,以此提高绕过后台服务器反爬策略的可能性. User-Agent获取 User-Agent可通过随 ...

  9. Linux常用命令入门文件、网络、系统及其他操作命令

    Linux常用命令入门文件.网络.系统及其他操作命令.压缩 归档 文件系统 系统管理 用户管理  网络管理 finger 相关命令 netstat ping rsh telnet wget 进程管理等 ...

  10. webpack 添加eslint代码审查

    1). 添加包 npm install eslint --save-dev npm install eslint-loader --save-dev npm install eslint-plugin ...