代码

<!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. 在mac版virtual box中安装ubuntu虚拟机的NAT/Host-Only网络配置踩坑记录

    之前用惯了vmware和parallels desktop,网络配置十分智能,基本不用自己配置.由于版权原因,工作电脑上换了免费的virtual box用,四五年都完全在虚拟机里干活的本菜鸡居然在虚拟 ...

  2. python-模块-包

    一 模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编 ...

  3. android 拖拉和放大

    public class MainActivity extends Activity { private ImageView imageView; @Override public void onCr ...

  4. 创建GitHub（注册、创建仓库）

    说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字. 本文中假设用户名为 chenqiufei 1. 注册账号 地址: ...

  5. 看过这些我明白了依赖注入及IoC

    背景 最近一段时间在学习laravel框架,了解到这个框架一个比较核心的概念就是服务容器,而服务容器似乎又和依赖注入有关系.但是碍于官方关于这方面的讲解篇幅过少,所以自学了一下. 自学的途径也跟大家一 ...

  6. LeetCode Array Easy 119. Pascal's Triangle II

    Description Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's tria ...

  7. shell变量替换扩展 变量测试

  8. teb教程3

    配置和运行机器人导航 简介:配置teb_local_planner作为navigation中local planner的插件 参考teb安装 由于局部代价地图的大小和分辨率对优化性能影响很大,因为占据 ...

  9. 【学术篇】CF833B TheBakery 分治dp+主席树

    题目の传送门~ 题目大意: 将\(n\)个蛋糕分成恰好\(k\)份, 求每份中包含的蛋糕的种类数之和的最大值. 这题有两种做法. 第一种是线段树优化dp, 我还没有考虑. 另一种就是分治+主席树. 然 ...

  10. 【Leetcode周赛】从contest1开始。（一般是10个contest写一篇文章）

    注意,以前的比赛我是自己开了 virtual contest.这个阶段的目标是加快手速,思考问题的能力和 bug-free 的能力. 前面已经有了100个contest.计划是每周做三个到五个cont ...