neoDrag
Plugin to make any object draggable.
Version 1.0
Based on:
https://anseki.github.io/plain-draggable
Sample apps:
https://visualneo.com/tutorials/dragdrop
https://visualneo.com/tutorials/dragdrop2
https://visualneo.com/tutorials/dragdrop3
Video tutorial:
neoDragInit
|
Purpose: |
Makes an Object, HTML or SVG element draggable by user By default, the moving is restricted to inside of the element's parent element. |
|
Category: |
neoDrag |
|
Syntax: |
neoDragInit "containerId"
containerId Select an Object to make it draggable |
neoDragSetSnapObject
|
Purpose: |
The draggable element gravitates toward a snap-target when it is moved to near the snap-target, and it sticks to the snap-target |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetSnapObject "containerId" "dropId"
containerId Draggable object dropId Snap object (comma separated if more than one) |
neoDragSetDropObject
|
Purpose: |
Set a correct target drop object for a draggable element |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetDropObject "containerId" "dropId" thepoints goback ondropsuccess ondropfail
containerId Draggable object dropId Target drop object (comma separated if more than one) thepoints Variable to store the number of correctly droped objects goback Return to start point if incorrect drop target? ondropsuccess On drop success subroutine ondropfail On drop fail subroutine |
neoDragSetDropObjectSVG
|
Purpose: |
Set a correct target drop object for a draggable SVG element. Use only for SVG elements. |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetDropObjectSVG "containerId" "dropId" thepoints goback ondropsuccess ondropfail
containerId Draggable object dropId Target drop object (comma separated if more than one) thepoints Variable to store the number of correctly droped objects goback Return to start point if incorrect drop target? ondropsuccess On drop success subroutine ondropfail On drop fail subroutine |
neoDragSetEvents
|
Purpose: |
Set subroutines to execute under different drag events. |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetEvents "containerId" ondragstart ondragmove ondragend
containerId Draggable object ondragstart On drag start subroutine ondragmove On drag move subroutine ondragend On drag end subroutine |
neoDragSetGrid
|
Purpose: |
Set a grid that the draggable element snaps to |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetGrid "containerId" step
containerId Draggable object name step Grid step |
neoDragSetContainment
|
Purpose: |
A rectangle that restricts the moving of the draggable element. The draggable element can not move to the outside of this rectangle even if a mouse pointer is moved to there. It can be a HTML or SVG element |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetContainment "containerId" "containmentId"
containerId Draggable object name containmentId Containment object |
neoDragSetContainmentBox
|
Purpose: |
A box that restricts the moving of the draggable element. The draggable element can not move to the outside of this rectangle even if a mouse pointer is moved to there. |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetContainmentBox "containerId" theleft thetop thewidth theheight
containerId Draggable object name theleft Box left coordinate thetop Box top coordinate thewidth Box width theheight Box height |
neoDragSetHandle
|
Purpose: |
A part element of the draggable element that receives mouse (or touch interfaces) operations. A user seizes and drags this element to move the draggable element. |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetHandle "containerId" "handleId"
containerId Draggable object name handleId Handle object |
neoDragSetPosition
|
Purpose: |
Set the draggable object position |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetPosition "containerId" "posx" "posy"
containerId Draggable object posx x position posy y position |
neoDragDestroy
|
Purpose: |
Eliminate object draggability |
|
Category: |
neoDrag |
|
Syntax: |
neoDragDestroy "containerId"
containerId Draggable object |
neoDragDisable
|
Purpose: |
Disable dragging temporaly |
|
Category: |
neoDrag |
|
Syntax: |
neoDragDisable "containerId"
containerId Draggable object |
neoDragEnable
|
Purpose: |
Re-enable dragging after disable. |
|
Category: |
neoDrag |
|
Syntax: |
neoDragEnable "containerId"
containerId Draggable object |
neoDragGetPositionX
|
Purpose: |
Get draggable object X coordinate |
|
Category: |
neoDrag |
|
Syntax: |
neoDragGetPositionX "containerId" [resultvar]
containerId Draggable object resultvar Variable to store result |
neoDragGetPositionY
|
Purpose: |
Get draggable object Y coordinate |
|
Category: |
neoDrag |
|
Syntax: |
neoDragGetPositionY "containerId" [resultvar]
containerId Draggable object resultvar Variable to store result |
neoDragCheckCollision
|
Purpose: |
Check if two objects collide using their bounding rectangles. Return true if they overlap and false if not |
|
Category: |
neoDrag |
|
Syntax: |
neoDragCheckCollision "object1" "object2" [returnvar]
object1 Object 1 object2 Object 2 returnvar Variable to store result |
neoDragCheckFullCollision
|
Purpose: |
Check if one object overlap completely with another one. Return true if they overlap completely and false if not |
|
Category: |
neoDrag |
|
Syntax: |
neoDragCheckFullCollision "object1" "object2" [returnvar]
object1 Object 1 object2 Object 2 returnvar Variable to store result |
neoDragCheckSnaped
|
Purpose: |
Check if the dragable object is snaped (true) or not (false) |
|
Category: |
neoDrag |
|
Syntax: |
neoDragCheckSnaped "containerId" [returnvar]
containerId Draggable object returnvar Variable to store result |
neoDragReturnToStart
|
Purpose: |
Return a draggable object to its starting position |
|
Category: |
neoDrag |
|
Syntax: |
neoDragReturnToStart "containerId"
containerId Draggable object |
neoDragReturnToStartAnimated
|
Purpose: |
Return a draggable object to its starting position with animation |
|
Category: |
neoDrag |
|
Syntax: |
neoDragReturnToStartAnimated "containerId"
containerId Draggable object |
neoDragSetDraggableClass
|
Purpose: |
Set a class name that is added to the draggable element |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetDraggableClass "containerId" "classname"
containerId Draggable object classname Class name |
neoDragSetDraggingClass
|
Purpose: |
Set a class name that is added to the draggable element within the period from when a mouse button is pressed until the button is released |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetDraggingClass "containerId" "classname"
containerId Draggable object classname Class name |
neoDragSetMovingClass
|
Purpose: |
Set a class name that is added to the draggable element within the period from when the draggable element starts moving until a mouse button is released |
|
Category: |
neoDrag |
|
Syntax: |
neoDragSetMovingClass "containerId" "classname"
containerId Draggable object classname Class name |