Script Aculo Us Drag & Drop - script.aculo.us

What is Script Aculo Us Drag And Drop?

The maximum famous feature of net 2.0 interface is the drag and drop facility. Fortunately script.aculo.us comes with an inherent functionality to help drag and drop.

To use the dragging skills of script.aculo.us, you will want to load the drag drop module, which also requires the consequences module. So your minimum loading for script.aculo.us will look like this:

Draggings things around

It's miles very simple to make an object drag gable using script.aculo.us. It requires developing of an instance of the Drag gable class, and identifying the detail to be made drag gable.

Draggable Syntax

The primary parameter to the constructor identifies the detail to be made drag gable both because the identification of the detail, or a connection with the detail. the second parameter specifies non-obligatory facts on how the draggable element is to act.

Draggable Options

You can use one or extra of the following alternatives while creating your drag gable object.

Option

Description

Examples

revert

If set totrue, the element returns to its original position when the drag ends. Also specifies whether thereverteffectcallback will be invoked when the drag operation stops. Defaults tofalse.

Example

snap

Used to cause a draggable to snap to a grid or to constrain its movement. If false (default), no snapping or constraining occurs.

·If it is assigned an integer x, the draggable will snap to a grid of x pixels.

·If an array [x, y], the horizontal dragging will snap to a grid of x pixels and the vertical will snap to y pixels.

·It can also be a function conforming toFunction( x , y , draggable ) that returns an array [x, y].

Example

zindex

Specifies the CSS z-index to be applied to the element during a drag operation. By default, the element's z-index is set to 1000 while dragging.

Example

ghosting

Boolean determining whether the draggable should be cloned for dragging, leaving the original in place until the clone is dropped. Defaults tofalse.

Example

constraint

A string used to limit the draggable directions, eitherhorizontalorvertical. Defaults tonullwhich means free movement.

Example

handle

Specifies an element to be used as the handle to start the drag operation. By default, an element is its own handle.

Example

starteffect

An effect called on element when dragging starts. By default, it changes the element's opacity to 0.2 in 0.2 seconds.

Example

reverteffect

An effect called on element when the drag is reverted. Defaults to a smooth slide to element's original position.Called only ifrevertis true.

Example

endeffect

An effect called on element when dragging ends. By default, it changes the element's opacity to 1.0 in 0.2 seconds.

Example

Callback Options

Additionally, you can use any of the following callback functions in the options parameter :

Function

Description

Examples

onStart

Called when a drag is initiated.

Example

onDrag

Called repeatedly when a mouse moves, if mouse position changes from previous call.

Example

change

Called just as onDrag (which is the preferred callback).

Example

onEnd

Called when a drag is ended.

Example


Besides for the "exchange" callback, every of these callbacks accepts parameters: the Draggable item, and the mouse event item.

Draggable Example

Right here, we define five factors that are made draggable: There elements, an element, and a element. The cause of the There extraordinary elements is to demonstrate that regardless of whether or not an element begins off with a positioning rule of static (the default), relative, or absolute, the drag behavior is unaffected.

This will produce following result –

drag and drop

Dropping Dragged things

An detail is converted right into a drop target through a name to the add() method inside a namespace referred to as Droppables.

The Droppables namespace has important techniques: add() to create a drop goal, and remove() to do away with a drop goal.

Syntax

Here is the syntax of the upload() technique to create a drop goal. The upload() approach creates a drop goal out of the detail handed as its first parameter, using the options in the hash exceeded as the second.

The syntax for take away() is even greater easier. The remove() technique removes the drop target conduct from the passed detail.

Options

You can use one or more of the following options while creating your drag gable object.

Option

Description

Examples

Hoverclass

The name of a CSS class that will be added to the element while the droppable is active (has an acceptable draggable hovering over it). Defaults to null.

Example

Accept

A string or an array of strings describing CSS classes. The droppable will only accept draggables that have one or more of these CSS classes.

Example

Containment

Specifies an element, or array of elements, that must be a parent of a draggable item in order for it to be accepted by the drop target. By default, no containment constraints are applied.

Example

Overlap

If set to 'horizontal' or 'vertical', the droppable will only react to a Draggable if its overlapping by more than 50% in the given direction. Used by Sortables, discussed in the next chapter.

Example

Callback Options

Additionally, you can use any of the following callback functions in the options parameter :

Function

Description

Examples

OnHover

Specifies a callback function that is activated when a suitable draggable item hovers over the drop target. Used by Sortables, discussed in the next chapter.

Example

OnDrop

Specifies a callback function that is called when a suitable draggable element is dropped onto the drop target.

Example

Examples

Here, the first part of this example is much like our previous instance, besides that we have used Prototype's on hand $A() function to convert a node list of all of the factors inside the element with the id of drag gables to an array.

This will produce following result –

drag and drog

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

script.aculo.us Topics