All Projects → Foveluy → Luy Dragger

Foveluy / Luy Dragger

dragger with a render props

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
Formdraggerdemo
一个可在窗体内随意拖动窗体的方案
Stars: ✭ 24 (-82.22%)
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
vue-component-creater-ui
拖拽式Vue组件代码生成编辑器(VCC)
Stars: ✭ 383 (+183.7%)
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 and 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].