Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up

Dragee - drag&drop library for desktop and mobile apps

NotificationsYou must be signed in to change notification settings

dragee/dragee

Repository files navigation

npm version

A lightweight, dependency-free JavaScript library for drag and drop, sortable lists, and target-based interactions.

Full Documentation

Installation

npm install dragee

Core Components

Draggable

The base class for making elements draggable.

import{Draggable}from'dragee';constelement=document.getElementById('draggable');constcalculusFx=(x)=>{x=x/100;return(x*Math.sin(x*x)+1)*10+80;};newDraggable(element,{bound:(point,size)=>{constretPoint=point.clone();retPoint.y=calculusFx(point.x);returnretPoint;},position:newPoint(210,calculusFx(210))});// Eventsdraggable.on('drag:start',(event)=>console.log('Started dragging'));draggable.on('drag:move',(event)=>console.log('Dragging'));draggable.on('drag:end',(event)=>console.log('Finished dragging'));

Draggable Bounding Demo

Predefined Bounding Functions

Dragee provides several predefined bounding functions to constrain draggable movement:

// Bound to element's boundariesBoundToElement.bounding(element,container)// Bound to specific rectangleBoundToRectangle.bounding(rectangle)// Bound to vertical line with Y-axis constraintsBoundToLineX.bounding(x,startY,endY)// Bound to horizontal line with X-axis constraintsBoundToLineY.bounding(y,startX,endX)// Bound to line between two pointsBoundToLine.bounding(startPoint,endPoint)// Bound to circleBoundToCircle.bounding(center,radius)// Bound to arcBoundToArc.bounding(center,radius,startAngle,endAngle)

Sortable

Two types of sortable lists are available:

List

Basic sortable list implementation.

import{Draggable,List}from'dragee';constgridContainer=document.querySelector('.grid-container');constgridItems=gridContainer.querySelectorAll('.grid-item');constgridDraggables=Array.from(gridItems).map(item=>newDraggable(item,{container:gridContainer,nativeDragAndDrop:true}));newList(gridDraggables)

BubblingList

Vertical sortable list that uses bubbling algorithm for smooth and natural sorting behavior.

import{Draggable,BubblingList}from'dragee';constlistContainer=document.querySelector('.sortable-demo-list');constlistItems=listContainer.querySelectorAll('.items')constdraggableItems=Array.from(listItems).map(item=>{newDraggable(item,{container:listContainer,nativeDragAndDrop:true,emulateNativeDragAndDropOnTouch:true})});newBubblingList(draggableItems);

Sotrable BubblingList Demo

Targets

Target areas for draggable elements.

import{Target,FloatLeftStrategy,transformedSpaceDistanceFactory}from'dragee'consttarget=newTarget(element,draggables,{timeEnd:200,timeExcange:400,parent:parentElement,strategy:newFloatLeftStrategy(()=>target.getRectangle(){radius:80,getDistance:transformedSpaceDistanceFactory({x:1,y:4}),removable:true})});

Target Strategies

FloatLeftStrategy

Orders draggables from top to bottom, positioning them on the left side of the target area.

newTarget(element,draggables,{strategy:newFloatLeftStrategy(()=>target.getRectangle(),{radius:80,getDistance:transformedSpaceDistanceFactory({x:1,y:4})})});

FloatRightStrategy

Orders draggables from top to bottom, positioning them on the right side of the target area.

newTarget(element,draggables,{strategy:newFloatRightStrategy(()=>target.getRectangle(),{radius:80,getDistance:transformedSpaceDistanceFactory({x:1,y:4})})});

NotCrossingStrategy

A free-form positioning strategy that prevents draggables from overlapping. Items can be placed anywhere within the target area but will maintain their own space without intersecting with other items.

newTarget(element,draggables,{strategy:newNotCrossingStrategy(()=>target.getRectangle())});
[8]ページ先頭
©2009-2025 Movatter.jp