超丝滑拖拽旋转库，16点位，带边界检测，圆角控制，动态位置指示器，拖拽旋转无抖动，动态箭头，完全开源拖拽库，坐标精准，旋转后，坐标始终为左上角那个点的坐标

比如低代码，画板，视频剪辑，图片裁剪，封面制作，操作交互等等。

而这些离不开前端底层的拖拽框架

基于canvas实现的拖拽框架，非常丝滑，自由度高，但是做一些复杂业务难度较大

所以使用div+css+js实现了一款16点拖拽旋转的库

没有耐心看文章的同学，可以直接访问：

无论是高速拖拽，还是旋转后拖拽，都没有抖动，非常丝滑。

顾名思义，禁止元素超出父容器。

无论是旋转前，还是旋转后，都不会出界

旋转前，我们能用AABB来实现边界检测，很轻松很惬意

而旋转后，变成了顶点检测（OBB），难度的性质瞬间发生了质变，丝毫不亚于前面的旋转无抖

无奈，我用的是最笨的方法去做，分4个象限，每个顶点比较两条边，做了16次判断

这可不是一个普通的指示器，而是一个动态的指示器

当然，不喜欢可以关闭，把参数从true改成false，就这么简单.

只有在激活的状态才会显示4个控制点

由于背景是蓝色，而控制点也是蓝色，所以看的不是很清楚（见谅）

一句话来说，让鼠标的方向跟随矩形边的方向。

让鼠标始终和四条边处于垂直的状态

那你可能想问，这有什么用，没这个功能不照样拖拖拽拽

如果没有做这个功能，大致情况如下吧

由于时间比较紧张，所以没有封装成npm的包

且仅有vue3版本，直接把这个库当成一个组件用就好了

开源：16点位，6特性，拖拽旋转库（DDR）

前端

低代码

超丝滑16点位拖拽旋转库，支持边界检测、圆角控制、动态位置指示器，旋转无抖动。内置动态箭头方向，坐标精准，完全开源。适用于低代码、画板、视频剪辑等场景，提供Vue3组件直接使用。https://ddr.mx2d.cn/

容器

2026采购季 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

开源：16点位，6特性，拖拽旋转库（DDR）

开源：16点位，6特性，拖拽旋转库（DDR）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐