New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

es-drager

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

es-drager

A draggable, resizable, rotatable component based on vue3

latest
Source
npmnpm
Version
1.3.4
Version published
Maintainers
1
Created
Source

ES Drager 拖拽组件

  • 中文
  • English

ES Drager
DraggableResizableRotatableskewable

🌈介绍

基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件

  • 拖拽&区域拖拽
  • 支持缩放
  • 旋转
  • 网格拖拽缩放
  • 拖拽编辑器

运行项目

# 拉取项目
git clone https://github.com/vangleer/es-drager.git

# 安装依赖
pnpm install

# 运行项目
pnpm dev

# 打包drager组件
pnpm build

# 打包文档
pnpm docs:build

主要目录介绍

目录功能说明
packages/docs项目示例文档、编辑器展示
packages/editor编辑器核心代码
packages/drageres-drager组件

综合案例

下面是基于 es-drager 实现的一个简单可视化拖拽编辑器

ES Drager Editor

相关文章

可拖拽、缩放、旋转组件实现细节

网格效果及使用方法

辅助线和撤销回退

元素组合与拆分

菜单操作栏、json数据导入导出

⚡ 使用说明

安装依赖

npm i es-drager

全局注册

import { createApp } from 'vue'
import App from './App.vue'

import 'es-drager/lib/style.css'
import Drager from 'es-drager'

createApp(App)
  .component('es-drager', Drager)
  .mount('#app')
  • 使用
<template>
  <es-drager>
    drager
  </es-drager>
</template>

组件中直接使用

<template>
  <Drager>
    drager
  </Drager>
</template>

<script setup lang='ts'>
import Drager from 'es-drager'
</script>

浏览器直接引入

直接通过浏览器的 HTML 标签导入 es-drager，然后就可以使用全局变量 ESDrager 了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/es-drager/lib/style.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <es-drager>drager</es-drager>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/es-drager"></script>
  <script>
    const { createApp } = Vue
    const app = createApp({})
    app.use(ESDrager)
    app.mount('#app')
  </script>
</body>
</html>

Drager API

Drager 属性

属性名说明类型默认
tagcomponent组件的is属性^[string]div
type类型，rect, text, image^[string]rect
width宽度^[number]100
height高度^[number]100
left横坐标偏移^[number]0
top纵坐标偏移^[number]0
angle旋转角度^[number]0
skew倾斜角度^[Array][0, 0]
color颜色^[string]#3a7afe
resizable是否可缩放^[boolean]true
rotatable是否可旋转^[boolean]-
skewable 是否可倾斜^[boolean]-
boundary是否判断边界(最近定位父节点，考虑性能谨慎使用。只支持移动，缩放在v1.3后不支持)^[boolean]-
disabled是否禁用^[boolean]-
minWidth最小宽度^[number]-
minHeight最小高度^[number]-
maxWidth最大宽度^[number]-
maxHeight最大高度^[number]-
selected控制是否选中^[boolean]-
checkCollision是否开启碰撞检测^[boolean]-
snapToGrid开启网格^[boolean]-
gridX网格X大小^[number]50
gridY网格Y大小^[number]50
snap开启吸附^[boolean]-
snapThreshold吸附阈值^[number]10
markline辅助线(可自定义)^[boolean]^[Function]-
extraLines添加除了es-drager元素以外的对齐线，例如添加中心点对齐(可参考)^[Function]
scaleRatio缩放比^[number]1
disabledKeyEvent禁用方向键移动^[boolean]-
border是否显示边框^[boolean]true
aspectRatio宽高缩放比^[number]-
equalProportion宽高等比缩放(该属性和aspectRatio互斥，同时使用会存在问题)^[boolean]-
resizeList显示的缩放handle列表，top, bottom, left, right, top-left, top-right, bottom-left, bottom-right^[string[]]-

Drager 事件

事件名说明类型
change位置、大小改变^[Function](dragData) => void
drag拖拽中^[Function](dragData) => void
drag-start拖拽开始^[Function](dragData) => void
drag-end拖拽结束^[Function](dragData) => void
resize缩放中^[Function](dragData) => void
resize-start缩放开始^[Function](dragData) => void
resize-end缩放结束^[Function](dragData) => void
rotate旋转中^[Function](dragData) => void
rotate-start旋转开始^[Function](dragData) => void
rotate-end旋转结束^[Function](dragData) => void
skew倾斜中^[Function](dragData) => void
skew-start倾斜开始^[Function](dragData) => void
skew-end倾斜结束^[Function](dragData) => void
focus获取焦点/选中^[Function](selected) => void
blur失去焦点/非选中^[Function](selected) => void
  • dragData 类型
export type DragData = {
  width: number
  height: number
  left: number
  top: number
  angle: number
  skew: number[],
}

Drager 插槽

插槽名说明
default自定义默认内容
resize缩放handle
rotate旋转handle
skew倾斜handle

Keywords

drag
resize
rotate
vue-drager
vue-drag-resize
es-drager

FAQs

Package last updated on 07 Mar 2026

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Attackers Are Hunting High-Impact Node.js Maintainers in a Coordinated Social Engineering Campaign

Security News

Attackers Are Hunting High-Impact Node.js Maintainers in a Coordinated Social Engineering Campaign

Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.

By Sarah Gooding  -  Apr 03, 2026