- 综合排序
- 最热优先
- 最新优先
- 来自专栏向治洪
可拖拽gridview
的控件，GridView主要是来显示网格的控件，在Android的开发中使用很普通，相对于TextView，Button这些控件来说要来的复杂些，今天给大家带来长按GridView的item,然后将其拖拽其他 GridView的拖动的Demo，但是大部分都是相同的，而且存在一些Bug,而且大部分都是点击GridView的item然后进行拖动，或者item之间不进行实时交换，今天给大家更加详细的介绍GridView拖拽 镜像到屏幕上面，触发GridView向下滚动 GridView交换数据，刷新界面，移除item的镜像 看完上面的这些思路你是不是找到了些感觉了呢，心里痒痒的想动手试试吧，好吧，接下来就带大家根据思路来实现可拖拽的 item显示出来，这样子就实现了GirdView的拖拽效果啦，接下来我们来使用下我们自定义可拖拽的GridView吧，先看主界面布局，只有我们自定义的一个DragGridView <RelativeLayout 好了，今天的讲解就到此结束，效果还不错吧，看完这篇文章你是不是觉得GridView拖拽也不是那么难实现呢？
5.5K50发布于 2018-01-29 可拖拽列表实现
需要做一个可复用的“网页可拖拽的列表排序”组件。从一开始，我就想：既要满足需求，高度封装；又得保证体验，视觉要足够现代精致。 “可拖拽的”。 为了未来还能扩展排序动画或同列表间拖拽，我把一些核心方法都挂在原型上，而非闭包里，这样便于继承与二次封装。 调试一整天后，我才意识到：最好把拖拽元素直接设置为 position: fixed; pointer-events: none; transform: translate3d(...) 在交互层面，拖拽项半透明并带有轻微的阴影，以示“正在被抓取”；占位节点则用淡灰色边框和虚线背景，视觉上既不显眼，又能给用户清晰提示。
56510编辑于 2025-05-06基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用实例解析
代码教程 Vue + D3实现可拖拽拓扑图的技术方案与应用实例 一、拓扑图概述与技术选型 （一）拓扑图概念与应用场景 拓扑图是一种抽象的网络结构图，用于展示节点（设备、系统等）和连接（关系、链路等）之间的关系 2)) .force('collision', d3.forceCollide().radius(d => d.size + 5)); return simulation; }; 拖拽功能实现 cy', d => d.y); labels .attr('x', d => d.x) .attr('y', d => d.y); }); }; // 拖拽功能 , 'url(#linkGradient)') .attr('stroke-width', d => d.value || 1); 六、总结 通过结合Vue和D3，我们可以实现功能强大、交互丰富的可拖拽拓扑图 ： 技术选型：Vue负责UI和交互，D3负责图形渲染和布局 核心功能：实现了力导向布局、节点拖拽、交互事件等 应用实例：提供了基础网络拓扑、实时更新和复杂拓扑等示例 高级扩展：支持节点类型定制、连接样式定制和动画效果
51610编辑于 2025-09-03- 来自专栏前端开发
基于 Vue 结合 D3 构建可拖拽拓扑图的技术方案及应用实例解析
Vue + D3实现可拖拽拓扑图的技术方案与应用实例一、拓扑图概述与技术选型（一）拓扑图概念与应用场景拓扑图是一种抽象的网络结构图，用于展示节点（设备、系统等）和连接（关系、链路等）之间的关系。 height / 2)) .force('collision', d3.forceCollide().radius(d => d.size + 5)); return simulation;};拖拽功能实现 .attr('cy', d => d.y); labels .attr('x', d => d.x) .attr('y', d => d.y); });};// 拖拽功能 stroke', 'url(#linkGradient)') .attr('stroke-width', d => d.value || 1);六、总结通过结合Vue和D3，我们可以实现功能强大、交互丰富的可拖拽拓扑图 Vue,D3, 可拖拽拓扑图，前端开发，数据可视化，JavaScript,HTML,CSS, 响应式设计，交互设计，Web 应用，技术方案，应用实例，动态渲染，用户体验资源地址：https://pan.quark.cn
2.4K11编辑于 2025-05-31 - 来自专栏javafx框架tornadofx
创建可拖拽的控件
dragableControl.gif class DraggablePanelsView : View("Draggable Panels") { override val root = borderpane { center = pane { add( makeDraggable(LoginFrag().root as Node).apply { relocate(0
2.2K40发布于 2019-12-25 - 来自专栏用户2276240的专栏（3）
原生js实现可拖拽表格
其中，通过拖拽直接交换单元格内容是一种直观、高效的操作方式，广泛应用于课程表编排、任务看板、配置管理等场景。 本文将详细介绍如何使用纯原生 JavaScript（无任何框架依赖）实现一个支持单元格拖拽交换的 HTML 表格，并提供完整可运行的源代码。<!
14720编辑于 2026-03-31 - 来自专栏跟Qt君学编程
Qt官方示例-可拖拽本文
source() == this) { event->setDropAction(Qt::MoveAction); event->accept(); /* 接受拖拽事件 mime->data(hotSpotMimeDataKey()).split(' '); if (hotSpotPos.size() == 2) { /* 松开拖拽设置为当前位置 source() == this) { event->setDropAction(Qt::MoveAction); event->accept(); /* 接受拖拽事件
97740发布于 2019-10-09 - 来自专栏大前端（横向跨端 & 纵向全栈）
原生JS实现可拖拽登录框
分享一个用原生JS实现的可拖拽登录框，效果如下： 实现的代码如下： <! <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现可拖拽登录框 //设定鼠标在X和Y方向的初始值为0 var mouseOffsetX = 0; var mouseOffsetY = 0; //是否可拖拽的标记 var isDraging = false; //鼠标事件1——计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可扡动 $('dialogDrag' pageWidth - dialogWidth; var maxY = pageHeight - dialogHeight; //做判断，防止拖拽出允许范围
5.3K20发布于 2020-11-26 - 来自专栏前端之攻略
Element UI 中 dialog 可拖拽实现方法
一-在utils文件夹下新建dialogDrag.js文件，创建自定义指令 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag
5.2K10发布于 2020-11-03 - 来自专栏全栈程序员必看
android的layout_android可拖拽layout
每一个ViewGroup(例如LinearLayout, RelativeLayout, CoordinatorLayout, etc)需要存储有关其孩子view的属性信息。它的孩子view被放在ViewGroup，这些位置信息存储在一个包装类viewgroup.layoutparams对象中。
84910编辑于 2022-11-08 - 来自专栏Creator星球游戏开发社区
Cocos Creator基础教程(11)—可拖拽组件
在游戏中实现节点的可拖动是一个比较常见情况，比如：可以给小朋友做一个将果皮投进垃圾箱的教学练习、角色换装、物品包裹界面等。 在Cocos Creator中实现一个可拖动组件，只需对目标节点拖拽配置就能让节点任意移动，这对策划、美术人员来说是不是很有杀伤力！ 1. 实现可拖拽组件 我们来看下组件代码非常简单，就算你不会编程，根着注释相信也能明白个大概： cc.Class({ extends: cc.Component, onLoad() {
5.4K31发布于 2019-09-11 - 来自专栏全栈程序员必看
Jquery实现可拖拽的树菜单「建议收藏」
server”> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Jquery 可拖拽树 var isDrageToRoot = false; //是否拖拽至顶级节点 //1.树Html初始化 var InitTreeHtml = “treeDemo”) { //为顶级文件夹拖拽至顶级不显示样式,【即顶级不能再拖拽至顶级】 $(rootUlId). $(“#zTreeMask_” + currentDrageNodeId).append($($currentAId).clone()); //推断当前拖拽的节点为展开目录则先把目录收缩再拖拽 不然鼠标移上节点又显示原来拖拽时的样式 【移动后(移除)再移上鼠标不能显示样式bug NOTDO】 $(“a”).unbind(“mouseover”).unbind
5.1K30编辑于 2022-07-10 - 来自专栏直播知识
短视频程序源码，实现选中可拖拽功能
</head> <body>
<script> var oDiv = document.querySelector("div");//首先获取要拖拽的67630发布于 2020-09-27 - 来自专栏程思阳的专栏
Android笔记： 使用RecyclerView打造可拖拽的GridView
如果我们设置了非0的dragFlags ，那么当我们长按item的时候就会进入拖拽并在拖拽过程中不断回调onMove()方法，我们就在这个方法里获取当前拖拽的item和已经被拖拽到所处位置的item的ViewHolder 到这里，已经可以拖拽了，但是拖拽的时候我们拖拽的对象不能高亮显示，这是不友好的，我们希望拖拽的Item在拖拽的过程中背景颜色加深，这样就需要继续重写下面两个方法： //当长按选中item的时候（ super.clearView(recyclerView, viewHolder); viewHolder.itemView.setBackgroundColor(0); } OK，这样就完成了一个可拖拽的 更加复杂的需求 上面的代码完成了基本功能，但实际的产品需要往往可能会有些不一样，比如说，产品希望，有一些item可以拖拽，一些item无法拖拽，就如上图的“更多”是无法拖拽的。这个咋办呢？ 详见demo 开始拖拽时震动 支付宝的拖拽网格在长按后开始拖拽时会有一次短时间的震动提示用户开始拖拽了，很友好的交互，我们也加一个： 添加权限： <uses-permission android:name
2.4K31编辑于 2022-01-11 - 来自专栏Android知识点总结
Flutter 桌面探索 | 自定义可拖拽导航栏
菜单数据的状态管理 我们现在的菜单数据是写死的，对于可拖拽的功能，需要对这些数据进行修改和触发更新。所以菜单数据本身也就上升为了需要管理的状态。 如何拖动菜单 我们先来分析一下拖拽菜单的界面表现。如下所示，可将一个菜单拖拽出来，拖出的组件具有一定的透明度；另外当拖拽物达到目标时，目标底部会显示蓝线示意移至其下。 这里使用的是 Draggable 和 DragTarget 的组合，其中 Draggable 指的是可拖拽物体，DragTarget 指的是受体目标。 可以看出，其实这里导航菜单同时承担着这两种角色，既需要拖拽，又需要作为目标接收拖拽物，这就是可拖拽导航的一个小难点。 本文简单介绍了一下状态管理的使用价值，完成了一个简单的自定义可拖拽导航栏，相信从中你可以学到一些东西。后续会基于这个导航继续拓展，比如界面切换，支持添加移除等。那本文就到这里，谢谢观看~
3K20编辑于 2022-09-20 springboot项目集成dolphinscheduler调度器 可拖拽spark任务管理
dolphinscheduler调度器接入注意事项等信息可参考我的上一篇博客进行了解，地址在这里 -> @TOC一、功能清单二、可拖拽spark任务管理说明：任务管理实际是操作dolphinscheduler drag.task.state}")String dragTaskState;@Autowiredprivate DragSparkTaskMapper dragSparkTaskMapper;1.创建可拖拽模型 Exception e) { log.info("请求异常:{}", e); } return Response.success(); }2.更新可拖拽模型 Exception e) { log.info("请求异常:{}", e); } return Response.success(); }3.删除可拖拽模型 ", response); return response.getBody(); }三、本人相关其他文章链接1.springboot项目集成dolphinscheduler调度器 可拖拽
26810编辑于 2025-07-12用JSHTMLCSS 构建可拖拽、可冻结、可编辑的原生交互式表格示例
（如事件冒泡冲突、拖拽卡顿、冻结区域交互失效等）。 ：每个方法职责单一，易于单元测试（如getFrozenOffset()可独立验证）。 3.拖拽排序：支持多行/单行+智能插入位置不同于简单dragstart/drop，本系统实现了：✅多行拖拽：选中多行后拖拽，整体移动；✅防自循环：if(fromIndices.includes(toIdx ✅响应式与可访问性使用--custom-properties统一主题色，便于定制；所有按钮含aria-label语义（可扩展）；支持键盘导航（Enter保存编辑，Escape取消）。五、如何扩展？ ;z-index:20;background:var(--header-bg);}/*数据行容器*/.div-body{display:flex;flex-direction:column;}/*行-可拖拽的实体
40621编辑于 2026-04-01- 来自专栏前端达人
关于后台管理系统可拖拽式组件的设计思路
比如： image.png 对于这类的页面，我们完全可以设计一个组件，使用拖拽的方式，将组件一个个拖到指定区域，进行结构组装，然后再写一个对组装数据的渲染组件，渲染成页面即可。 ，直接在数据顶层加 children 字段即可，然后可以进行拖拽排序位置。 复制代码 组件的拖拽处理 对于组件的拖拽处理，我们可以直接使用 H5 的 draggable[1]，首先是左侧的组件列表的每一个组件都是可以拖拽的，在拖动到中间展示区域的时候，我们需要获取 drop label: '占位提示文本', value: 'placeholder', type: 'input' }, { label: '可清除 第一个位置是 table 上方的按钮位置区域 第二个位置是 column 操作列的按钮位置区域 最后 后台管理系统可拖拽式组件，大体的设计思路就这样。主要分为两大块：页面配置和页面渲染两个组件。
1.6K20编辑于 2022-04-18 - 来自专栏鸿蒙开发专栏教程
鸿蒙特效教程06-可拖拽网格实现教程
鸿蒙特效教程06-可拖拽网格实现教程 本教程适合 HarmonyOS Next 初学者，通过简单到复杂的步骤，一步步实现类似桌面APP中的可拖拽编辑效果。 拖拽功能的关键事件详解 实现拖拽功能主要依赖以下事件： onItemDragStart: 当用户开始拖拽某个项时触发。 参数：event(拖拽事件信息)，itemIndex(被拖拽项的索引) 返回值：被拖拽项的UI表示 onItemDrop: 当用户放置拖拽项时触发。 onItemDragMove: 当拖拽项在网格中移动时触发。 onItemDragLeave: 当拖拽项离开某个位置时触发。 小结与进阶提示 通过本教程，我们实现了一个功能完整的可拖拽应用网格界面。 主要学习了以下内容： 使用Grid组件创建网格布局 使用@Builder创建可复用的UI构建函数 实现拖拽排序功能 优化UI和用户体验 进阶提示： 可以添加长按震动反馈，增强交互体验。
59200编辑于 2025-03-28 - 来自专栏该溜子的专栏
【Android】进度条ProgressBar && 可拖拽进度条Seekbar
Log.i(TAG, "onStartTrackingTouch: 开始拖动了" ); } /** * 用户停止拖拽的时候 需要重写三个方法 （1）onProgressChanged 进度被改变时，调用 （2）onStartTrackingTouch 开始拖动进度条时，调用 （3）onStopTrackingTouch 用户停止拖拽的时候
87010编辑于 2025-08-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号