The official home of the Python Programming Language: JqueryUI Droppable

JqueryUI Droppable

jQueryUI provides droppable() method to make any DOM element droppable at a specified target (a target for draggable elements).

Syntax

The droppable() method can be used in two forms:

$(selector, context).droppable (options)Method

$(selector, context).droppable ("action",params) Method

$(selector, context).droppable (options) Method

The droppable (options) method declares that an HTML element can be used as an element in which you can drop other elements. The optionsparameter is an object that specifies the behavior of the elements involved.

Syntax

$(selector, context).droppable (options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows:

$(selector, context).droppable({option1: value1, option2: value2..... });

Following table lists the different options that can be used with this method:

Option

Description

This option is used when you need to control which draggableelements are to be accepted for dropping. By default its value is *.

activeClass

This option is a String representing one or more CSS classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. By default its value is false.

addClasses

This option when set to false will prevent the ui-droppable class from being added to the droppable elements. By default its value istrue.

disabled

This option when set to truedisables the droppable. By default its value is false.

greedy

This option is used when you need to control which draggableelements are to be accepted for dropping on nested droppables. By default its value is false. If this option is set to true, any parentdroppables will not receive the element.

hoverClass

This option is String representing one or more CSS classes to be added to the element of droppable when an accepted element (an element indicated inoptions.accept) moves into it. By default its value is false.

scope

This option is used to restrict the droppable action of draggableelements only to items that have the same options.scope (defined indraggable (options)). By default its value is "default".

tolerance

This option is a String that specifies which mode to use for testing whether a draggable is hovering over a droppable. By default its value is "intersect".

Following section will show you few working examples of drop functionality.

Default Functionality

The following example demonstrates a simple example of droppable functionality, passing no parameters to the droppable() method .

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

#draggable-1 {

width: 100px; height: 50px; padding: 0.5em; float: left;

margin: 22px 5px 10px 0;

}

#droppable-1 {

width: 120px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

}

</style>

$(function() {

$( "#draggable-1" ).draggable();

$( "#droppable-1" ).droppable();

});

</script>

</head>

<body>

<p>Drag me to my target</p>

</div>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Drag me to my target

Drop here

Use of addClass, disabled and tolerance

The following example demonstrates the usage of three options (a) addClass (b) disabled and(c) tolerance in the drop function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

#draggable-2 {

width: 100px; height: 50px; padding: 0.5em;

margin: 0px 5px 10px 0;

}

#droppable-2,#droppable-3, #droppable-4,#droppable-5 {

width: 120px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

}

</style>

$(function() {

$( "#draggable-2" ).draggable();

$( "#droppable-2" ).droppable({

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#droppable-3" ).droppable({

disabled : "true",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#droppable-4" ).droppable({

tolerance: 'touch',

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped with a touch!" );

}

});

$( "#droppable-5" ).droppable({

tolerance: 'fit',

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped only when fully fit on the me!" );

}

});

</script>

</head>

<body>

<p>Drag me to my target</p>

</div>

</div>

<p>I'm disabled, you can't drop here!</p>

</div>

<p>Tolerance Touch!</p>

</div>

<p>Tolerance Fit!</p>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Drag me to my target

Drop here

I'm disabled, you can't drop here!

Tolerance Touch!

Tolerance Fit!

Now drop the element on the "Tolerance Touch!" box (just touch the edge of this box) and see the changes of target element. Now to drop the element on "Tolerance Fit!" target, the draggableelement has to fully overlap the target elementi.e "Tolerance Fit!" target.

Choose elements to be dropped

The following example demonstrates the use of option accept and scope option in the drag function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.wrap{

display: table-row-group;

}

#japanpeople,#indiapeople, #javatutorial,#springtutorial {

width: 120px; height: 70px; padding: 0.5em; float: left;

margin: 0px 5px 10px 0;

}

#japan,#india,#java,#spring{

width: 140px; height: 100px;padding: 0.5em; float: left;

margin: 10px;

}

</style>

$(function() {

$( "#japanpeople" ).draggable();

$( "#indiapeople" ).draggable();

$( "#japan" ).droppable({

accept: "#japanpeople",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#india" ).droppable({

accept: "#indiapeople",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#javatutorial" ).draggable({scope : "java"});

$( "#springtutorial" ).draggable({scope : "spring"});

$( "#java" ).droppable({

scope: "java",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#spring" ).droppable({

scope: "spring",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

</script>

</head>

<body>

<p>People to be dropped to Japan</p>

</div>

<p>People to be dropped to India</p>

</div>

<p>Japan</p>

</div>

<p>India</p>

</div>

<hr/>

<p>People who want to learn Java</p>

</div>

<p>People who want to learnSpring</p>

</div>

</div>

<p>Spring</p>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the output:

People to be dropped to Japan Japan

People to be dropped to India India

People who want to learn Java Java

People who want to learn Spring Spring

Here you can see that you can drop element "People from Japan" on only "Japan" target and element "People from India" on target India.Similary the scope for "People who want to learn Java" is set to target "Java" and "People who want to learn Spring" is set to "Spring target".

Managing appearance

Following example demonstrates the use of options activeClass and hoverClass of JqueryUIclass, which help us manage appearance.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

#draggable-3 {

width: 100px; height: 50px; padding: 0.5em; float: left;

margin: 21px 5px 10px 0;

}

#droppable-6 {

width: 120px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

}

.active {

border-color : blue;

background : grey;

}

.hover {

border-color : red;

background : green;

}

</style>

$(function() {

$( "#draggable-3" ).draggable();

$( "#droppable-6" ).droppable({

activeClass: "active",

hoverClass: "hover",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

</script>

</head>

<body>

<p>Drag me to my target</p>

</div>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Drag me to my target

Drop here

You can notice that on dragging or hovering (over the target) of "Drag me to my target" element, changes the color of target element "Drop here".

$(selector, context).droppable ("action",params) Method

The droppable ("action", params) method can perform an action on droppable elements, such as preventing droppable functionality. The action is specified as a string in the first argument (e.g., "disable" to prevent the drop). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).droppable ("action", params);;

Following table lists the different actions that can be used with this method:

Action

Description

destroy

This action destroys the droppable functionality of an element completely. The elements return to their pre-initstate.

disable

This action disables the droppable operation. The elements are no longer droppable elements. This method does not accept any arguments.

enable

This action reactivate the droppable operation. The elements can again receive a droppable element. This method does not accept any arguments.

option

This action gets an object containing key/value pairs representing the current droppable options hash. This method does not accept any arguments.

option(optionName )

This action gets the value of currently associated droppable element with the specifiedoptionName. This takes a String value as argument.

option(optionName, value )

This action sets the value of the droppable option associated with the specified optionName.

option( options )

This action is sets one or more options for the droppable. The argument options is a map of option-value pairs to be set.

widget

This action returns a jQuery object containing the droppable element. This method does not accept any arguments.

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of destroy() method.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.draggable-4 {

width: 90px; height: 50px; padding: 0.5em; float: left;

margin: 0px 5px 10px 0;

border: 1px solid red;

background-color:#B9CD6D;

}

.droppable-7 {

width: 100px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

border: 1px solid black;

background-color:#A39480;

}

.droppable.active {

background-color: red;

}

</style>

$(function() {

$('.draggable-4').draggable({ revert: true });

$('.droppable-7').droppable({

hoverClass: 'active',

drop: function(e, ui) {

$(this).html(ui.draggable.remove().html());

$(this).droppable('destroy');

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "i'mdestroyed!" );

}

});

</script>

</head>

<body>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output:

drag drag 2 drag 3

drop here drop here drop here

If you drop "drag1" on any of the elements named "drop here", you will notice that this element gets dropped and this action destroys the droppable functionality of an element completely. You cannot drop "drag2" and "drag3" on this element again.

Event Management on droppable elements

In addition to the droppable (options) method we saw in the previous sections, JqueryUIprovides event methods which gets triggered for a particular event. These event methods are listed below:

Event Method

Description

activate(event,ui)

This event is triggered when the accepted draggableelement starts dragging. This can be useful if you want to make the droppable "light up" when it can be dropped on.

create(event, ui)

This event is triggered when a droppable element is created. Where event is of type Event, and ui is of typeObject.

deactivate(event,ui)

This event is triggered when an accepted draggable stops dragging. Where event is of type Event, and ui is of typeObject.

drop(event, ui)

This action is triggered when an element is dropped on the droppable. This is based on the tolerance option. Whereevent is of type Event, and uiis of type Object.

out(event, ui)

This event is triggered when an accepted draggableelement is dragged out of the droppable. This is based on the tolerance option. Whereevent is of type Event, and uiis of type Object.

over(event, ui)

This event is triggered when an accepted draggableelement is dragged over the droppable. This is based on the tolerance option. Whereevent is of type Event, and uiis of type Object.

Example

The following example demonstrates the event method usage during drop functionality. This example demonstrates the use of events drop,over and out.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

#draggable-5 {

width: 100px; height: 50px; padding: 0.5em; float: left;

margin: 22px 5px 10px 0;

}

#droppable-8 {

width: 120px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

}

</style>

$(function() {

$( "#draggable-5" ).draggable();

$("#droppable-8").droppable({

drop: function (event,ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

over: function (event,ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "moving in!" );

out: function (event,ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "moving out!" );

}

});

</script>

</head>

<body>

<p>Drag me to my target</p>

</div>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Drag me to my target

Drop here

Here you will notice how the message in the droppable element changes as you drag the element.

The official home of the Python Programming Language

JqueryUI Droppable

ليست هناك تعليقات:

إرسال تعليق