ejDraggable

12 Dec 20189 minutes to read

Plugin to make any DOM element draggable.

Syntax

JAVASCRIPT

$(element).ejDraggable()

Example

HTML

<div id="draggable"/>

JAVASCRIPT

<script>
// Create draggable
$('#draggable').ejDraggable();   
</script>

Requires

• module:jQuery

• module:ej.core

• module:ej.draggable

Members

clone boolean

If clone is specified.

Default Value

• false

Example

JAVASCRIPT

//To set clone API value during initialization  
        $("#draggable").ejDraggable({ clone: true });

JAVASCRIPT

//Get or set the clone API, after initialization:
        //Gets the clone value  
        $("#draggable").ejDraggable('option', 'clone');

cursorAt object

Sets the offset of the dragging helper relative to the mouse cursor.

Default Value

• { top: -1, left: -2 }

Example

JAVASCRIPT

//To set cursorAt API value during initialization  
        $("#draggable").ejDraggable({ cursorAt:  { top: 1, left: -2 } });

JAVASCRIPT

//Get or set the cursorAt API, after initialization:
        //Gets the cursorAt value  
        $("#draggable").ejDraggable('option', 'cursorAt');

distance number

Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.

Default Value

• 1

Example

JAVASCRIPT

//To set distance API value during initialization  
        $("#draggable").ejDraggable({ distance: 1 });

JAVASCRIPT

//Get or set the distance API, after initialization:
        //Gets the distance value  
        $("#draggable").ejDraggable('option', 'distance');

dragArea boolean

The drag area is used to restrict the dragging element bounds.Specify the id of the container within which the element should be dragged.

Default Value

• null

Example

JAVASCRIPT

//To set dragArea API value during initialization  
        $("#draggable").ejDraggable({ dragArea:"#container"});

JAVASCRIPT

//Get or set the dragArea API, after initialization:
        //Gets the dragArea value  
        $("#draggable").ejDraggable('option', 'dragArea');

handle string

If specified, restricts drag start click to the specified element(s).

Default Value

• null

Example

JAVASCRIPT

//To set handle API value during initialization  
        $("#draggable").ejDraggable({ handle: null });

JAVASCRIPT

//Get or set the handle API, after initialization:
        //Gets the handle value  
        $("#draggable").ejDraggable('option', 'handle');

scope string

Used to group sets of draggable and droppable items, in addition to droppable’s accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.

Default Value

• ‘default’

Example

JAVASCRIPT

//To set scope API value during initialization  
        $("#draggable").ejDraggable({ scope: 'default' });

JAVASCRIPT

//Get or set the scope API, after initialization:
        //Gets the scope value  
        $("#draggable").ejDraggable('option', 'scope');

autoScroll boolean

Used to enable auto scroll while drag and drop the element.

Default Value

• ‘false’

Example

JAVASCRIPT

//To set autoScroll API value during initialization  
        $("#draggable").ejDraggable({ autoScroll: true });

JAVASCRIPT

//Get or set the autoScroll API, after initialization:
        //Gets the autoScroll value  
        $("#draggable").ejDraggable('option', 'autoScroll');

scrollSensitivity number

Represents when to start the scrolling inside the scroll container on dragging

Default Value

• ‘20’

Example

JAVASCRIPT

//To set scrollSensitivity API value during initialization  
        $("#draggable").ejDraggable({ scrollSensitivity: 22 });

JAVASCRIPT

//Get or set the scrollSensitivity API, after initialization:
        //Gets the scrollSensitivity value  
        $("#draggable").ejDraggable('option', 'scrollSensitivity');

scrollSpeed number

Specifies how much distance of scroll should move on dragging once reached scroll sensitivity area.

Default Value

• ‘20’

Example

JAVASCRIPT

//To set scrollSpeed API value during initialization  
        $("#draggable").ejDraggable({ scrollSpeed: 25 });

JAVASCRIPT

//Get or set the scrollSpeed API, after initialization:
        //Gets the scrollSpeed value  
        $("#draggable").ejDraggable('option', 'scrollSpeed');

Methods

destroy()

destroy in the draggable.

Example

HTML

< div  id="draggable" > </div >

JAVASCRIPT

<script>
// Create draggableObj
var draggableObj  = $("#draggable").data("ejDraggable");
draggableObj.destroy(); 
</script>

Events

destroy

This event is triggered when dragging element is destroyed.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the autocomplete model
type	string	returns the name of the event

Example

JAVASCRIPT

//destroy event for Draggable
$("#draggable").ejDraggable({ 
        destroy: function(args) {}
});

drag

This event is triggered when the mouse is moved during the dragging.

</tr>

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the draggable model
type	string	returns the name of the event
element	object	returns the current draggable element object
event	object	returns the event model values
target	object	returns the exact mouse down target element

Example

JAVASCRIPT

//drag event for Draggable
$("#draggable").ejDraggable({ 
        drag: function(args) {}
});

dragStart

Supply a callback function to handle the drag start event as an init option.

</tr>

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the draggable model
type	string	returns the name of the event
element	object	returns the current draggable element object
event	object	returns the event model values
target	object	returns the exact mouse down target element

Example

JAVASCRIPT

//dragStart event for Draggable
$("#draggable").ejDraggable({ 
        dragStart: function(args) {}
});

dragStop

This event is triggered when the mouse is moved during the dragging.

</tr>

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the draggable model
type	string	returns the name of the event
element	object	returns the current draggable element object
event	object	returns the event model values
target	object	returns the exact mouse down target element

Example

JAVASCRIPT

//dragStop event for Draggable
$("#draggable").ejDraggable({ 
        dragStop: function(args) {}
});

helper

This event is triggered when dragged.

</tbody> </table> #### Example

JAVASCRIPT

//helper event for Draggable
$("#draggable").ejDraggable({ 
        helper: function () {
                return $('<pre>').html("draggable").appendTo(document.body);}
});

Name	Type	Description
element	object	returns the draggable element object
sender	object	returns the event model values