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" >
GeeksforGeeks
</ 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 >
< img id = "handle_img"
src = "handle_img.png" >
< p >
The image below is the
element to be dragged
</ p >
< img id = "elem1" src = "elem1.png" >
</ body >
</ html >
|
Output:
Last Updated :
25 Dec, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...