ejDroppable

11 Jul 20183 minutes to read

Plugin to make any DOM element Droppable.

Syntax

  • JAVASCRIPT
    • $(element).ejDroppable()

    Example

  • HTML
    • <div  id="droppable" />
  • JAVASCRIPT
    • <script>
// Create Draggable
$('#droppable').ejDroppable();   
</script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.droppable

    Members

    accept object

    Used to accept the specified draggable items.

    Default Value

    • null

    Example

  • JAVASCRIPT
    • //To set scope API value during initialization  
        $("#droppable").ejDroppable({ accept: null });
  • JAVASCRIPT
    • //Get or set the accept API, after initialization:
        //Gets the accept value  
        $("#droppable").ejDroppable('option', 'accept');

    scope string

    Used to group sets of 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  
        $("#droppable").ejDroppable({ scope: 'default' });
  • JAVASCRIPT
    • //Get or set the scope API, after initialization:
        //Gets the scope value  
        $("#droppable").ejDroppable('option', 'scope');

    Methods

    destroy()

    destroy in the Droppable.

    Example

  • HTML
    • <div  id="droppable"> </div >
  • JAVASCRIPT
    • <script>
// Create droppableObj
var droppableObj  = $("#droppable").data("ejDroppable");
droppableObj.destroy(); 
</script>

    Events

    drop

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

    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
    target object returns the element which accepts the droppable element.

    Example

  • HTML
    • //drop event for Droppable
$("#droppable").ejDroppable({ 
        drop: function(args) {}
});

    out

    This event is triggered when the mouse is moved out.

    </tbody> </table> #### Example
  • HTML
    • //drop event for Droppable
$("#droppable").ejDroppable({ 
        out: function(args) {}
});
    ### over {:#events:over} This event is triggered when the mouse is moved over.
    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
    target object returns the mouse out over the element
    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
    target object returns the mouse over the element
    #### Example
  • HTML
    • //drop event for Droppable
$("#droppable").ejDroppable({ 
        over: function(args) {}
});