pc 收藏夹拖拽移除的简单例子drag drop

最新推荐文章于 2022-02-18 01:24:52 发布
最新推荐文章于 2022-02-18 01:24:52 发布
阅读量162 收藏
点赞数
原文链接：http://www.cnblogs.com/yhhBKY/p/11547930.html
版权

     代码

<!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>

效果图

 

转载于:https://www.cnblogs.com/yhhBKY/p/11547930.html

bangang8308
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt之QToolButton 实现动态拖拽Drag、Drop功能
Ilson_的博客
05-25 2790
简述 最近在做一个项目需要实现工具的动态添加功能，想来想去也只有动态拖拽最为直观，于是摸索了几天才摸索明白，最后选择了QToolButton作为载体重写了一下。当然也可以选择QPushButton作为载体，就看自己需求了。 效果 实现 QToolButton的重写： #ifndef MTOOLBUTTON_H #define MTOOLBUTTON_H #include <QToolButton> clas...
React通过原生鼠标事件实现拖拽(drag and drop)列表重排序
莫小猪的菜鸟进阶路
06-25 2878
虽然现在html5已经有支持拖拽的事件，但是支持还不那么全面。所以目前大部分的拖拽还是通过原生的鼠标事件来实现列表重新排序。话不多说。一步步开始做吧 盆友们可以通过下面链接查看所有代码和效果。 https://codesandbox.io/s/drap-and-drop-to-reorder-list-iqwqj Step1.准备一个模拟数据 let list = []; for(let i = 0; i< 10; i++){ list.push(`item ${i}`); } Step2
JavaScript 拖放效果系列三——解决快速拖拽的问题
yangsp1的专栏
10-15 759
原文来自：[url]http://www.cainiao8.com/web/js_examples/15_tuozhuai3.html[/url] 上一节我们让拖拽代码使用起来更方便、适用于多个元素，同时解决了偶尔会出现的拖动一个元素，多个元素一起移动的问题。但是在快速拖拽的时候，会出现延迟，或者元素干脆就停止移动了。 元素停止移动的原因 分析一下上面问题的原因：鼠标滑动地...
仿微信朋友圈发表图片拖拽和删除功能
热门推荐
kuyue的专栏
07-13 1万+
仿微信朋友圈发表图片拖拽和删除功能，使用ItemTouchHelper实现拖拽和删除功能，并解决图片OOM，从分析到实现代码。
H5 HTML 移动端触摸拖拽drag drop 自定义拖拽样式 使用PointerEvent模拟的拖拽方案
斯幽柏雷科技
02-18 4818
前言 原生的drag事件有许多诟病， 比如拖拽时跟随鼠标指针的那个元素样式过分简陋。 比如dataTransfer在除start和drop外无法访问，从而让drop元素无法很好的判断是否接受drop。 比如无法优雅的设置拖拽过程中的鼠标指针。。。。 比如不支持触摸拖拽。。。。 处于对多输入设备的兼容及花里胡哨的功能，我需要模拟一套drag和drop事件以实现需求。 这期主要是想安利一波我探索出的一种模拟浏览器原生的拖拽元素方案，兼容各种输入设备（PC/移动端适配） PointerEvent 如今能跑网页的
java drag_java Drag and drop
weixin_35569211的博客
02-24 140
DnD介绍就是Drag and drop，就是拖放。JColorChooser、JEditorPane、JFileChooser、JFormattedTextField、JList、JTable、JTextArea、JTextField、JTextPane、JTree这些组件提供默认的拖放支持。也就是说只要调用这些组件的setDragEnabled(true)方法，他们就可以被拖动了。The fo...
前端提高篇(七十三)：Drag和Drop拖放操作：拖放事件与dataTransfer对象操作
安之ccy的博客
03-24 7043
拖放API基础 drag：被拖放元素 在拖拽的过程中触发 dragend 被拖放元素 拖拽完成时 dragenter 目标元素 拖放元素进入目标元素时 dragover 目标元素 拖放元素在目标元素上时 dragleave 目标元素 拖放元素在目标元素上离开 drop 目标元素 被拖放的元素在目标元素上同时鼠标放开触发的事件 注：需要阻止dragover的默认行为才会触发drop事件 被拖拽的元素上需要设置属性：draggable="true"，才能被拖拽 被拖拽的元素有三个事件，分别是：dragstar
drag 和drop？ 来看这个详解吧！！
weixin_54527388的博客
01-18 2089
简介 拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。 在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！ 但是！！ 想要实现拖拽，需要添加 拖拽属性。 H5中拖拽属性： draggable： auto | true | false 注意：链接和图片默认是可拖动的，则不需要 draggable 属性。 - Drag（在拖拽目标时触发事件） dragstart - 元素开始拖动时触发此事件 drag - 元素正在拖动时触发此事件 dragend -
Drag&Drop 拖放API简介以及在React中的实践
weixin_34023982的博客
05-22 2872
最近有个需求，需要产品导航栏支持拖放。 虽然开源社区已有不少成熟的拖放库，但考虑到代码可控性和可定制性，还是自己写吧。 选型 关于选型，前端实现拖放功能，无外乎几种： 1、通过样式布局+鼠标事件，采用此方案的插件如：@shopify/draggable 2、Canvas绘制，插件如：konva 3、Drag&Drop接口，插件如：dragula 经过一番研究，最终选择了原生Drag&amp...
Android中Drag and Drop拖拽功能的使用
01-02
以下是一个简单的例子： ```java view.setOnDragListener(new View.OnDragListener() { @Override public boolean onDrag(View v, DragEvent event) { switch (event.getAction()) { case DragEvent.ACTION_...
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
09-28
HTML5中的拖放（Drag and Drop）功能是一个强大的交互特性，允许用户抓取网页上的元素并将其移动到其他位置，从而实现数据交换或界面布局的调整。这一特性在各种应用场景中都非常常见，如文件管理、图像编辑、网页...
Drag&drop.zip
02-15
在我们的例子中，“Drag&drop.zip”项目包含了一个测试示例，展示了如何在两个列表框（QListWidget）之间进行拖放操作。 在Qt 5.6中，启用拖放功能通常需要以下步骤： 1. **启用拖放功能**：对于每个列表框，需要...
drag+drop+grid+scroll
07-08
在Android开发中，"drag+drop+grid+scroll"是一个重要的功能组合，它涉及到用户界面的交互设计，尤其是对于数据展示和操作的优化。在这个场景下，开发者需要创建一个可以支持拖放（drag & drop）操作、具备网格布局...
Jquery 拖动(drag n drop) 购物车 php
06-23
综上所述，"Jquery 拖动(drag n drop) 购物车 php"项目展示了如何利用jQuery的拖放功能创建一个交互式的购物车系统，配合PHP进行后端数据处理，从而为用户提供直观、易用的在线购物体验。通过深入学习和实践这个项目...
ASP网上拍卖系统设计与实现(论文+源代码+开题报告).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
基于Android远程监控工具设计与实现.docx
最新发布
08-10
基于Android远程监控工具设计与实现.docx
C#网络办公助理设计与实现(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
[毕业设计]VB环境下身份证信息管理系统的设计与实现(源代码+论文).zip
08-10
[毕业设计]VB环境下身份证信息管理系统的设计与实现(源代码+论文)
安卓利用draganddrop 给recycleview新增item
06-10
安卓中，RecyclerView 是一个常用的列表控件，并且支持拖拽和滑动删除等功能。下面是利用 Drag and Drop 实现 RecyclerView 新增 Item 的步骤： 1. 给 RecyclerView 添加一个 ItemTouchHelper 回调： ```java ItemTouchHelper.Callback callback = new ItemTouchHelper.Callback() { // 是否支持长按拖拽 @Override public boolean isLongPressDragEnabled() { return true; } // 是否支持滑动删除 @Override public boolean isItemViewSwipeEnabled() { return true; } // 拖拽操作回调 @Override public int onDrag(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) { // do something } // 滑动删除回调 @Override public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) { // do something } }; ItemTouchHelper touchHelper = new ItemTouchHelper(callback); touchHelper.attachToRecyclerView(recyclerView); ``` 2. 在 onDrag 回调中处理拖拽操作： ```java @Override public int onDrag(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) { // 获取要拖拽的 Item 和目标 Item 的位置 int fromPosition = viewHolder.getAdapterPosition(); int toPosition = target.getAdapterPosition(); // 如果目标位置在当前位置之前，依次向前移动 if (fromPosition > toPosition) { for (int i = fromPosition; i > toPosition; i--) { Collections.swap(dataList, i, i - 1); } } // 如果目标位置在当前位置之后，依次向后移动 else { for (int i = fromPosition; i < toPosition; i++) { Collections.swap(dataList, i, i + 1); } } // 更新数据 adapter.notifyItemMoved(fromPosition, toPosition); return 0; } ``` 3. 在 onSwiped 回调中处理滑动删除操作： ```java @Override public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) { // 获取要删除的 Item 的位置 int position = viewHolder.getAdapterPosition(); // 移除数据 dataList.remove(position); // 更新数据 adapter.notifyItemRemoved(position); } ``` 这样，你就可以在 RecyclerView 上实现拖拽和滑动删除等操作了，具体效果可以参考 Android 官方示例：https://github.com/android/views-widgets-samples/tree/master/RecyclerViewDragAndDrop。如果你想在 RecyclerView 上新增 Item，可以在 onDrag 回调中处理，具体实现方式可以根据你的需求自行编写。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值