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:



Description


The neoDrag plugin for VisualNEO Web enables users to make HTML or SVG elements draggable, enhancing interactive features for applications that require dynamic object positioning. Here’s a comprehensive overview of its functionalities:

    • Basic Draggable Setup:
      • neoDragInit: Initializes a draggable object within a specified container, enabling users to move it interactively. By default, movement is confined within the parent container.
    • Advanced Snap and Grid Options:
      • neoDragSetSnapObject: Defines a snap target, causing the draggable element to “snap” to a specific target when dragged close to it.
      • neoDragSetGrid: Configures a grid-based snapping system, where the draggable object aligns to a defined grid pattern, making it ideal for structured layouts or design applications.
    • Containment and Boundary Restrictions:
      • neoDragSetContainment: Limits the draggable area to a designated container, ensuring that the object cannot be dragged outside its bounds.
      • neoDragSetContainmentBox: Sets a custom rectangular area within which the draggable element can move, specifying coordinates for finer control over movement boundaries.
    • Handle and Position Controls:
      • neoDragSetHandle: Assigns a specific handle for dragging, allowing users to drag the element from a designated part of the object, which is especially useful for larger or composite elements.
      • neoDragSetPosition: Manually sets the draggable object’s position, providing precise control over initial placement or adjustments after dragging.
    • Event and Collision Detection:
      • neoDragSetEvents: Defines subroutines to trigger on drag start, movement, and end, enabling interactive responses during the drag process.
      • neoDragCheckCollision: Checks for overlaps between draggable elements, useful for applications involving interactive games or dynamic interfaces where objects need to interact.
    • Draggable State Control:
      • neoDragEnable and neoDragDisable: Toggle the draggable state, allowing temporary disabling and re-enabling of dragging based on user actions or app conditions.
      • neoDragDestroy: Removes draggable functionality from an element when it is no longer needed.

The neoDrag plugin is well-suited for applications needing interactive object manipulation, such as design tools, educational apps, or customizable interfaces within VisualNEO Web​.

 

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

Created with the Personal Edition of HelpNDoc: Free CHM Help documentation generator