ejDraggable

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