Foveluy / Luy Dragger
dragger with a render props
Stars: ✭ 135
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Luy Dragger
Ngx Sortablejs
Angular 2+ binding to SortableJS. Previously known as angular-sortablejs
Stars: ✭ 397 (+194.07%)
Mutual labels: drag, draggable
Dnd Kit
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Stars: ✭ 3,456 (+2460%)
Mutual labels: draggable, drag
Smooth Dnd
drag and drop library for javascript
Stars: ✭ 408 (+202.22%)
Mutual labels: drag, draggable
plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (-84.44%)
Mutual labels: drag, draggable
Gridstrap.js
gridstrap.js is a jQuery plugin designed to take Bootstrap's CSS grid system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour.
Stars: ✭ 32 (-76.3%)
Mutual labels: drag, draggable
vue-sortable-tree
vue tree draggable, drag item sort
Stars: ✭ 87 (-35.56%)
Mutual labels: drag, draggable
Vue Draggable Resizable Gorkys
Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线
Stars: ✭ 521 (+285.93%)
Mutual labels: drag, draggable
v-drag
The simplest way to integrate dragging on Vue.js
Stars: ✭ 71 (-47.41%)
Mutual labels: drag, draggable
Scrollbooster
Enjoyable content drag-to-scroll library
Stars: ✭ 775 (+474.07%)
Mutual labels: drag, draggable
React Smooth Dnd
react wrapper components for smooth-dnd
Stars: ✭ 1,560 (+1055.56%)
Mutual labels: drag, draggable
Vue Smooth Dnd
Vue wrapper components for smooth-dnd
Stars: ✭ 1,121 (+730.37%)
Mutual labels: drag, draggable
Plain Draggable
The simple and high performance library to allow HTML/SVG element to be dragged.
Stars: ✭ 362 (+168.15%)
Mutual labels: drag, draggable
el-table-draggable
让element-ui的table可拖动排序,支持 行,列,跨表格等特性
Stars: ✭ 68 (-49.63%)
Mutual labels: drag, draggable
Svelte Grid
A responsive, draggable and resizable grid layout, for Svelte.
Stars: ✭ 473 (+250.37%)
Mutual labels: drag, draggable
draggable-polyfill
🌈a beautify polyfill for native drag!
Stars: ✭ 49 (-63.7%)
Mutual labels: drag, draggable
drag-to-close
Android library that provides a view group which allows to finish an activity by dragging a view.
Stars: ✭ 69 (-48.89%)
Mutual labels: drag, draggable
Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Stars: ✭ 23,641 (+17411.85%)
Mutual labels: drag, draggable
Vue Drag Resize
Vue Component for resize and drag elements
Stars: ✭ 1,007 (+645.93%)
Mutual labels: drag, draggable
Props dragger
这是一款使用 render props
写成的拖拽组件,使得获取组件状态格外简单
安装
npm install props-dragger
最简单的例子
import React from 'react';
import ReactDOM from 'react-dom';
import Dragger from '@props/dragger';
const Demo = () => {
return (
<Dragger>
{({ style, handle }) => (
<div className={name} style={{ ...style }} {...handle()}>
普通的拖拽组件
</div>
)}
</Dragger>
);
};
ReactDOM.render(<Demo />, document.getElementById('root'));
API 和 Props
API 描述
名字 | 描述 | 类型 | 是否需要 | 默认值 |
---|---|---|---|---|
x |
给予元素一个x,y的初始位置,单位是px |
number | false | undefined |
y | number | false | undefined | |
grid |
以网格的方式移动,每次移动并不是平滑的移动 [20,30],鼠标x轴方向移动了20 px ,y方向移动了30 px,整个子元素才会移动 |
array | false | undefined |
allowX | 只允许移动x轴 | bool | false | true |
allowY | 只允许移动y轴 | bool | false | true |
isUserMove |
是否由用户移动 可能是通过外部props改变 |
bool | false | undefined |
static |
是否静态 设置了就不可移动 |
bool | false | undefined |
onDragStart |
开始拖拽 |
func | false | undefined |
onDragMove |
正在拖拽 |
func | false | undefined |
onDragEnd |
结束拖拽,鼠标弹开 |
func | false | undefined |
onDragging |
受控函数 |
func | false | undefined |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].