script.aculo.us Drag & Drop handle Option
The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone.
The handle option is used to specify the element that would be used as the handle when the drag-gable item is being moved. It can either be a reference to the DOM element or a string defining the handle to be used.
Syntax:
{ handle: value }
Parameters: This option has a single value as mentioned above and described below:
- value: This is a reference to a DOM element or a string value that specifies the handle. The default value is not set.
The below example illustrates the use of this option.
Example:
HTML
<!DOCTYPE html> < html > < head > < script type = "text/javascript" src = "prototype.js" > </ script > < script type = "text/javascript" src = "scriptaculous.js" > </ script > < script type = "text/javascript" > window.onload = function () { // Draggable element with the // handle defined new Draggable('elem1', { handle: 'handle_img' }); }; </ script > </ head > < body > < div > < h1 style = "color: green" > w3wiki </ h1 > </ div > < strong > script.aculo.us Drag & Drop handle Option </ strong > < p > Drag the elements to see the effect of the handle option. The element below can be dragged using its handle. </ p > < p > The image below is used as the handle </ p > <!-- Define the image of the handle --> < img id = "handle_img" src = "handle_img.png" > < p > The image below is the element to be dragged </ p > <!-- Define the image to be dragged --> < img id = "elem1" src = "elem1.png" > </ body > </ html > |
Output:
Contact Us