Droppable elements in jQuery

Drag me to my destination

Dropp here

Press the left mouse key and drag this element to its destination in your screen.

Draggable

OptionsDetails
acceptType : Selector or Function
Default value "*"

Which draggable element is accepted by droppable ( target )
$( "#droppable" ).droppable({
	accept: "#draggable",
});
Reading the option value already set for accepting dragged element.
var accept = $( "#droppable" ).droppable( "option", "accept" );
We can set the option value
$( "#droppable2" ).droppable( "option", "accept", "#draggable" );
activeClass Type : String
Default value : false

The class will be added to droppable when the draggable is on move. This is calculated on every mouse move if refreshPositions is set to true.
$( "#droppable" ).droppable({
activeClass: "ui-state-highlight"
});
To read value
var activeClass = $( "#droppable" ).droppable( "option", "activeClass" );
To set the value
$( "#droppable" ).droppable( "option", "activeClass", "ui-state-highlight" );
addClasses Type : Boolean
Default value : true

It will stop adding ui-droppable class if set to false.
$( "#droppable" ).droppable({
addClasses: false
});
To read value
var addClasses = $( "#droppable" ).droppable( "option", "addClasses" );
To set the value
$( "#droppable" ).droppable( "option", "addClasses", false );
classesType : Object
Default value :{}

We can add classes to widget's element.
$( "#droppable" ).droppable({
classes: {
    "ui-droppable": "highlight"
  }
});
We can override these class names.

ui-droppable
ui-droppable-active
ui-droppable-hover

To read value (ui-droppable)
var class_used = $( "#droppable" ).droppable( "option", "classes.ui-droppable" );
To set the value
$( "#droppable" ).droppable( "option", "classes.ui-droppable", "ui-state-error"   );
To read value (ui-droppable-active) ( When draggable is on move )
var class_used = $( "#droppable" ).droppable( "option", "classes.ui-droppable-active" );
To set the value
$( "#droppable" ).droppable( "option", "classes.ui-droppable-active", "ui-state-active" );
To read value (ui-droppable-hover) ( When draggable is hovering over droppable )
var class_used = $( "#droppable" ).droppable( "option", "classes.ui-droppable-hover" );
To set the value
$( "#droppable" ).droppable( "option", "classes.ui-droppable-hover", "ui-priority-secondary" );
disabled Type : Boolean
Default value : false

It will disable the droppable if set to true.
$( "#droppable" ).droppable({
disabled: false
});
To read value
var status_used = $( "#droppable" ).droppable( "option", "disabled" );
To set the value
$( "#droppable" ).droppable( "option", "disabled", true );
greedy Type : Boolean
Default value : false

In a nested droppables all elements will receive the draggable element. If we set the greedy to true then parent element ( droppables ) can't receive the draggable element.

By using event.target.id we will display the id of the droppable elements which are received the draggable element.
$( "#droppable" ).droppable({
greedy: true
});
To read value
var status = $( ".droppable" ).droppable( "option", "greedy" );
To set the value
$( ".droppable" ).droppable( "option", "greedy", true );
hoverClass Type : String
Default value : false

When draggable is hovering over the droppable , the class specified by hoverClass is applied.
$( "#droppable" ).droppable({
hoverClass: "ui-state-active"
});
To read value
var class_used = $( "#droppable" ).droppable( "option", "hoverClass" );
To set the value
$( "#droppable" ).droppable( "option", "hoverClass", "ui-state-active" );
scope Type : String
Default value : "default"

When a group of draggable and droppable are there, then draggable with same scope value as droppable will be accepted.
$( "#droppable" ).droppable({
scope: "my_scope"
});
To read value
var scope_used = $( "#"+sel ).droppable( "option", "scope" );
To set the value
$('.droppable').droppable("option","scope","my_scope");
tolerance Type : String
Default value : "intersect"

Deciding How draggable will hover over the droppable

"fit": Draggable overlaps the droppable ( 100 % ) entirely.
"intersect": Draggable overlaps the droppable at least 50% in both directions.
"pointer": Mouse pointer overlaps the droppable.
"touch": Draggable overlaps the droppable any amount.
$( "#droppable" ).droppable({
tolerance: "touch"
});
To read value
var tolerance_used = $( "#droppable" ).droppable( "option", "tolerance" );
To set the value
$( '#droppable' ).droppable( "option", "tolerance", 'pointer' );
destroy Destory the droppable element
$( "#droppable" ).droppable( "destroy" );
disable Disables the droppable element
$( "#droppable" ).droppable( "disable" );
enable Enables the droppable element
$( "#droppable" ).droppable( "enable" );
instance() Retrieves the droppable's instance object
$( "#droppable" ).droppable( "instance" );
option(optionName) We can get value by using optionName as input.
var class_used = $( "#droppable" ).droppable( "option", "classes.ui-droppable-active" );
We can get name value pair by using option as object.
var  options = $( "#droppable" ).droppable( "option" );
$('#d1').html( " <b>disabled </b> " + options.disabled );
widget Returns jquery object representing droppable element.
var my_widget = $( "#droppable" ).droppable( "widget" );
activate This event is triggered when the accepted draggable started moving ( dragged ). This event is not trigged when the draggable element is on move.
activate: function( event, ui ) { }
To understand the event we will try both activate and deactivate ( triggered when draggable stopped moving ) together.
create This event is triggered when the droppable element is created.
create: function( event, ui ) { }
To understand the event we will use one button click function to create a droppable element.
deactivate This event is triggered when the accepted draggable stops moving ( dragged ). This event is not trigged when the draggable element is on move.
deactivate: function( event, ui ) { }
To understand the event we will try both activate and deactivate ( triggered when draggable stopped moving ) together. Try to display the coordinate of draggable element at staring or stopping of movement.
Hint : add this line inside the event function
var d_position = $('#draggable').position();
drop This event is triggered when the accepted draggable is dropped over the droppable element.

The overlapping area based on which drop event is trigged depends on tolerance option of droppable element.
drop: function( event, ui ) { }
To understand drop event we will try both activate and DROP event.
drop This event is triggered when draggable element is dropped over droppable element.
drop: function( event, ui ) { }
out This event is triggered when draggable element moves out of droppable element.
out: function( event, ui ) { }
over This event is triggered when draggable element moves over droppable element.
over: function( event, ui ) { }


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer