首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏码农的生活

    JS实现拖拽代码

    ////html的代码说明: ////定义了一个table,用于测试js拖拽功能 <html> <head> <script type="text/javascript 2</td></tr> <tr><td>3</td></tr> </table> <tr> <td> </tr> </table> </pre> ////js<em>代码</em>说明 : ////currentMoveObj :全局对象,记录当前<em>拖拽</em>的那个对象 ////var relLeft;:鼠标按下时的横坐标 ////var relTop;鼠标按下时的纵坐标 currentMoveObj.style.pixelLeft; relTop = event.y - currentMoveObj.style.pixelTop; } /////当鼠标松开时,当前<em>拖拽</em>对象置空 ,始终更新当前<em>拖拽</em>对象的坐标即可 function mouseMove() { if(null !

    9.8K00发布于 2021-09-23
  • 来自专栏web全栈

    VisualDrag低代码拖拽模板

    背景 接到一个需求做一个拖拽模板低代码生成界面(如上图),就是可以自定义界面元素拖拽生成页面,该页面需要可以存储,并且一比一还原。 因此得研究实现一个拖拽生成低代码平台,通过查询了各种资料,找到了以下比较合适的开源的低代码平台: visual-drag-demo:https://github.com/woai3c/visual-drag-demo 低代码数据可视化:https://www.mtruning.club/ 鲁班H5:https://ly525.gitee.io/luban-h5/zh/ quark-h5: https://github.com 删除组件、调整图层层级 放大缩小 撤消、重做 组件属性设置 吸附 预览、保存代码 绑定事件 绑定动画 拖拽旋转 复制粘贴剪切 多个组件的组合和拆分 锁定组件 网格线 可以参考原作者大大的文档: 可视化拖拽组件库一些技术要点原理分析 ,虽然还是有很多不懂的,,, 二开优化方案 由于个人的能力有限,只能在作者的基础上优化成满足自己需求的拖拽模板 1.

    2.1K20编辑于 2022-11-22
  • 来自专栏前端 TS/JS 核心讲堂

    原生JavaScript拖拽代码示例

    本文将详细介绍如何使用 纯原生 JavaScript(无任何框架依赖) 实现一个支持单元格拖拽交换的 HTML 表格,并提供完整可运行的源代码。 单元格均可拖动;拖影层(Helper Layer):一个绝对定位的

    ,作为被拖单元格的视觉副本,跟随鼠标移动;状态管理:记录当前拖拽源、原始内容、偏移量及目标单元格;视觉反馈:拖拽源高亮为淡紫色 三、完整源代码以下为可直接运行的完整 HTML 文件,包含样式、结构与逻辑:<! 请大家引用时保留这段作者声明,此代码为开源代码;使用不受限制,欢迎大家采用本人所写JS动态拖动表格实现代码。 五、结语本实现以极简代码达成直观的拖拽交换体验,体现了原生 Web 技术的强大能力。它不仅适用于教学演示,也可作为企业级应用的基础模块。

    11721编辑于 2026-04-01
  • 来自专栏悟道

    2-5 快速幂模板

    这个就是在快速乘的基础上改一下 sum=0--->sum=1 x+=x--->x*=x //快速幂模板 public double quickPow(double x,long y){ double sum=1; while(y>0){ if((y&1)==1){ sum*=x; } x*=x; y=y>>1; }

    33120发布于 2021-06-01
  • 来自专栏cwl_Java

    C++编程之美-数字之魅(代码清单2-5)

    代码清单2-5 /* 预定义的结果表 */ int countTable[256] = { 0, 1, 1, 2, 1, 2, 2, 3, 1, 2, 2, 3, 2, 3, 3, 4, 1

    23150编辑于 2022-11-30
  • 来自专栏AI机器学习与深度学习算法

    学习分类 2-5 线性可分

    感知机非常简单同时又很容易理解,但是相对应的,缺点也很多。感知机最大的缺点就是它只能解决线性可分的问题。

    55310编辑于 2022-11-08
  • 来自专栏前端达人

    手写原生代码专题 | 图片拖拽效果(一)

    二、 图片拖拽效果介绍 本篇文章,如下视频所示,界面有5个方格拖放区域,我们可以在这些区域里拖拽图片,当鼠标拖动图片时,图片周围有灰色的粗边框效果提示用户当前元素可拖动,在可放置图片的目标方格会出现白色的虚线边框并且背景色更改为黑色 三、拖拽相关知识复习 在练习前,我们先复习下和拖拽相关的几个API事件,在某个元素被拖动时,会按照顺序触发以下事件: dragstart(按住鼠标不放,刚开始拖动元素时,就会触发 dragstart 事件 (可调用拖拽API),示例代码如下: <divclass="empty"> <divclass="fill"draggable="true">

    <divclass=" 鼠标放下时,<em>拖拽</em>动作结束,触发dragend事件,我们定义 dragEnd() 函数,将图片元素的容器样式更改为fill。 ,有了这些基础后,我们就有了写出更复杂<em>拖拽</em>应用的基础。

2.7K30发布于 2021-06-16
  • 来自专栏低代码(low code)专栏

    这款拖拽式低代码开发平台,真香!

    代码开发平台相较于传统软件开发,它的优点可以总结为“3低4快”,“3低”是指成本低、使用门槛低、风险低,“4快”是指沟通快、实施快、上线快、变更响应快。这也是低代码最让业界感到意外的地方。 今天推荐一款功能强大,能力边界广,而且能满足各类业务场景需求的低代码开发工具——织信Informat。 这是一款新奇、实用、高效的企业级低代码开发工具,支持企业按需定制化构建各类信息管理系统,并且能对接外部系统和软硬件设备、支持可视化大屏展示。 、织信架构织信Informat的定位是企业级低代码开发平台,目标是构建各种企业级信息管理系统,例如ERP、CRM、MES、PLM、项目管理、OA等系统。 部署逻辑图​系统组件清单组件类型描述账号数据库pgsql 13版本以上存储账号等公用数据低代码数据库pgsql 13版本以上存储低代码应用数据,支持分布式部署代理服务器nginx负载均衡服务器存储服务器

    1.1K20编辑于 2023-08-04
  • 来自专栏coding for love

    2-5 浅析webpack打包内容

    Hash:本次打包的一个标识。 Version:使用的webpack版本 Time:本次打包耗时 Built at: 生成时间

    85140发布于 2019-05-24
  • 来自专栏Hank’s Blog

    2-5 R语言基础 factor

    #因子:分类数据 #有序和无序 #整数向量+标签label #Male/Female #常用于lm(),glm()

    41110发布于 2020-09-16
  • 来自专栏React可视化

    React可视化拖拽组件编辑代码生成

    mobile.png pc.png 特性: 任意拖拽嵌套:通过组件预览面板拖拽组件,到设计面板实现任意嵌套,设计面板中的组件也可随意拖拽嵌套 实时预览:设计面板中会实时展示组件的属性效果和样式效果, 通过样式配置面板修改样式,实时在页面中显示样式效果 模板功能:可以选中局部或者整个页面做为可复用的模板,提高页面配置效率减少重复工作 组件约束:根据组件特性配置组件约束,减少组件间的错误嵌套和报错 预览与代码生成 :可随时预览页面的真实效果,和页面的jsx代码与样式代码 多平台支持 :支持PC与移动端多型号设配切换展示 组件库替换 :通过简单的配置可以对接任何React组件库 github地址 在线预览

    3.9K30发布于 2020-02-27
  • 来自专栏前端 TS/JS 核心讲堂

    js拖拽-javascript拖拽缩放示例

    本文将系统讲解 原生 JavaScript 实现拖拽功能的核心原理、完整代码示例、常见问题及高级技巧。 一、两种主流实现方式方式 1:使用 HTML5 原生 Drag & Drop API(推荐用于跨容器拖拽)✅ 标准化,浏览器原生支持✅ 支持文件拖入、跨 iframe 拖拽❌ 事件模型复杂,样式控制受限 ❌ 移动端兼容性差方式 2:基于 mousedown mousemove mouseup 的自定义拖拽(推荐用于 UI 组件内部拖拽)✅ 完全可控,性能高✅ 可精细控制动画、边界、吸附等效果✅ 兼容性极佳 “抓”在点击点 在 document 上监听 mousemove/mouseup 避免鼠标移出元素后失效三、高级拖拽:可拖拽、可冻结、可编辑、可排序如我早期另一篇文章-用JS/HTML/CSS 构建可拖拽 磁吸、弹簧) 结合 requestAnimationFrame + 自定义逻辑记住核心公式: 拖拽位置 = 鼠标当前位置 - 初始偏移量掌握这一原则,你就能构建任何拖拽交互。

    14521编辑于 2026-04-01
  • 拖拽RecyclerView

    挥别第三方库:原生ItemTouchHelper掌控RecyclerView拖拽与侧滑原始译文参考:开发技术前线(原作者:PaulBurke/译者:objectlife)如果你还在使用残破累赘的第三方库 (比如早期的SwipeToDismiss)或者深陷于手写GestureDetector和onInterceptTouchEvent的泥沼来处理列表的侧滑删除和长按拖拽,那你需要立刻停下。 本文将展示如何用极简的代码在RecyclerView中解封这项强悍能力。[! 不仅仅是手势的剥离,它直接掌控了拖拽中悬浮视图的z-轴阴影(elevation抬升)、回位动画轨迹(dropsettling)甚至支持自定义约束方向。 这也引申出了极度严苛的代码规范:你的数据模型更新(mItems的维护)必须与notifyItemXXX保持绝对的一致且原子级同步!

    5610编辑于 2026-04-25
  • 来自专栏用户9257747的专栏

    腾讯低代码神器开源!拖拽开发,爽的飞起~

    腾讯tmagic-editor是一个所见即所得的页面可视化编辑器,实现零代码/低代码生成页面,可以快速搭建可视化页面生产平台,让非技术人员可以通过拖拽和配置,自助生成H5页面、PC页面、TV页面,大大降低页面生产成本 编排 这里指通过对组件的拖拽和配置,完成页面编辑,主要由非技术人员完成。 保存与发布 这个环节在技术实现上,分为生成DSL、构建、部署。 生成DSL: 编辑器和生成的页面之间,通过DSL解耦。 构建: 构建模块基于runtime代码,对组件进行打包构建,生成html、js、css文件。 包括左侧侧边栏、组件列表展示、已选组件的组件树、中间的页面拖拽的画布区域(也叫模拟器)、右侧表单配置区域、正中间上方的画布控制区域(放大缩小、网格线显隐)、预览、保存、查看源码(js schema描述的 部署可视化搭建服务 tmagic-editor提供的是开源代码,并不是一个saas服务,因此业务需要自己部署可视化搭建平台的服务。

    2K20编辑于 2023-09-18
  • 来自专栏刷题笔记

    2-5 Two Stacks In One Array (20 分)

    本文链接:https://blog.csdn.net/shiliang97/article/details/101173005 2-5 Two Stacks In One Array (20 分) Write

    71230发布于 2019-11-08
  • 来自专栏Deep learning进阶路

    2-5 线性表之循环链表

    2-5 线性表之循环链表 循环链表就是链表首尾相接连成一个环,可以用单链表 和 循环链表来实现。

    40840发布于 2019-07-02
  • 来自专栏NetCore 从壹开始

    2-5 安装容器Web工具:Docker Portainer

    现在已经习惯了容器化了,不仅可以很快的配合CICD来实现部署,同时主要是也能解决一些疑难杂症,比如在Linux中经常会有各种图形图像的依赖包问题。特别是内网环境。

    95620编辑于 2023-01-09
  • 来自专栏coding个人笔记

    js拖拽

    开发了那么久,对于js实现拖拽多少都写过,用于实际项目却没有。 先看一下之前写的: 如果鼠标慢慢移动,拖拽是没有任何问题的,如果速度快了,那么鼠标和元素就会分离。 最后贴上代码: <!

    6.9K30发布于 2020-04-24
  • 来自专栏用户7873631的专栏

    js拖拽

    /*js拖拽逻辑: 第一:为什么要定位? 因为 ? 往左往上left top要定位的哈 第二:为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的. 因为鼠标移动是在document移动,点击是在div上点击.其实一句话,鼠标移动div跟着移动而已. */ 核心代码: ? 鼠标是400.那样的话,400-(150-100)=350.就是div所在的位置.也就是move后的位置. js拖拽: <!

    6.1K41发布于 2020-10-30
  • 来自专栏刷题笔记

    2-5 修理牧场 (35 分)【优先队列】

    2-5 修理牧场 (35 分) 农夫要修理牧场的一段栅栏,他测量了栅栏,发现需要N块木头,每块木头长度为整数L​i​​个长度单位,于是他购买了一条很长的、能锯成N块的木头,即该木头的长度是L​i​​的总和

    1K10发布于 2020-06-23
  • 领券