代码

<!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. python+tushare获取沪深港股通持股明细

    接口:hk_hold 描述:获取沪深港股通持股明细,数据来源港交所. 限量:单次最多提取3800条记录,可循环调取,总量不限制 积分:用户积120积分可调取试用,2000积分可正常使用,单位分钟有流控 ...

  2. Vue 单页应用 的 首屏优化

    对于单页应用,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长.所以我们需要做一些相应的优化,减少响应时间,尽快把首屏显示出来. 1.压缩 ...

  3. 查看linux防火墙的状态

    如有需要可以加我Q群[308742428]大家一起讨论技术,有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下.iptables防火墙1.基本操作 # 查看防火墙状态 servi ...

  4. Pyhton第八节 字典补充

    Python 字典的基本元素是键值对(key-value), 每个键值对的key和value之间用:分割:每个键值对之间用,分割:整个键值对用花括号{}包围 字典内的键(key)必须唯一,值不需要唯一 ...

  5. 前端，用js根据一个对象，去除另个对象中重复的元素

    这里的应用场景是,两个div盛放待选项目和已选项目,如下图 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> < ...

  6. visual studio 自定义警告标签

    写代码中经常会遇见某段代码写的不大合适或者是有隐患,但是一时半会有没时间不去完善,总体上不影响程序,也就放下了 结果时间一久就给忘了 vs提供了自定义警告的功能,这样就能有个提醒啦,方便以后改进 us ...

  7. 转帖 使用eclipse创建之前没有创建的web.xml

    由于在下学习Java的时间不长,所以对于一些工具的使用不太熟悉,特别是eclipse,虽然这是一款强大的Java编译工具但是现有汉化版.所以在实际使用的时候难免会遇到各种各样的麻烦.今天就遇到了一个: ...

  8. 完爆 Best Fit，看阿里如何优化 Sigma 在线调度策略节约亿级成本

    摘要:2018 年“双 11”的交易额又达到了一个历史新高度 2135 亿.相比十年前,我们的交易额增长了 360 多倍,而交易峰值增长了 1200 多倍.相对应的,系统数呈现爆发式增长.系统在支撑“ ...

  9. js文字转语音（speechSynthesis）

    环境: windows 官网网址: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis 基础使用: var msg = n ...

  10. noip1998 提高组t3 挖地雷

    题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任一处 ...