jQuery UI DroppablejQuery UI facilitates you to use droppable() method to make any DOM element droppable at a specified target. Syntax: You can use the droppable () method in two forms: First MethodThe droppable (options) method specifies that you can use an HTML element as an element in which you can drop other elements. Here, the option parameter specifies the behavior of the elements involved. Syntax: You can use one or more options at a time using JavaScript object. If you are using more than one option then will have to separate them by using a comma. For example: Following is a list of the different options that can be used with this method: Option | Description |
---|
accept | This option is used when you need to control which draggable elements 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 is true. | diasabled | This option when set to true disables the droppable. by default its value is false. | greedy | This option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. by default its value is false. if this option is set to true, any parent droppables 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 in options.accept) moves into it. by default its value is false. | scope | This option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). by default its value is "default". | tolerence | 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". |
jQuery UI Droppable() method example 1Let's take an example to demonstrate the jQuery UI Droppable() method with no parameter. Test it NowjQuery UI Droppable() method example 2b) How to use addClass, disabled and tolerance: Following example specifies how to use these three options addClass, disable and tolerance in the drop function of jQuery UI. Test it NowjQuery UI Droppable() method example 3c) How to select elements to be dropped: The following example specifies how to use accept and scope options in the drag function of jQuery UI: Test it NowjQuery UI Droppable() method example 4d) How to use activeClass and hoverClass : activeClass and hoverClass options of jQuery UI are used to manage appearance. Let?s take an example to demonstrate this effect: Test it NowSecond MethodThe droppable ("action", params) method is used to perform an action on droppable elements, like preventing droppable functionality. You have to pass an action specified as a string in the first argument. i.e. "disable" to prevent the drop. Syntax: Following is the list of actions that can be used with this method: Action | Description |
---|
accept | This option is used when you need to control which draggable elements 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 will prevent the ui-droppable class from being added to the droppable elements,when set to false.by default its value is true. | disabled | This option disables the droppable,when set to true. by default its value is false. | greedy | This option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. by default its value is false. if this option is set to true, any parent droppables 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 in options.accept) moves into it. by default its value is false. | scope | This option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). by default its value is "default". | tolerence | 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". |
jQuery UI Droppable() method example 5Let's take an example to demonstrate the use of destroy () method: Test it NowThere are some event methods in jQueryUI which get triggered for a particular event. Following are some event methods. Event Method | Description |
---|
activate(event, ui) | This event is triggered when the accepted draggable element 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 type object. | deactivate(event,ui) | This event is triggered when an accepted draggable stops dragging. "Where" event is of type event, and ui is of type object. | drop(event,ui) | This action is triggered when an element is dropped on the droppable. this is based on the tolerance option. "Where" event is of type event, and "ui" is of type object. | out(event,ui) | This event is triggered when an accepted draggable element is dragged out of the droppable. this is based on the tolerance option. ?Where? event is of type event, and "ui" is of type object. | over(event,ui) | This event is triggered when an accepted draggable element is dragged over the droppable. this is based on the tolerance option. "Where" event is of type event, and "ui" is of type object. |
jQuery UI Droppable() method example 6Let's take an example to demonstrate the "drop", "over" and "out" events during drop functionality. Test it Now
|