script.aculo.us Sorting ghosting Option
Last Updated :
17 Dec, 2020
The ghosting option in the Sortable module is used to enable the user to make a semi-transparent copy of the element that is moved along with the mouse pointer. Its default value is ‘false’, which means no copy is made.
Syntax:
Sortable.create('list', {ghosting: boolean})
The examples below demonstrate this option:
Example 1: In this example, the ghosting option is set to “false”.
HTML
<!DOCTYPE html>
< html >
< head >
< script type = "text/javascript"
src = "prototype.js" >
</ script >
< script type = "text/javascript"
src = "scriptaculous.js" >
</ script >
< style >
li {
cursor: move;
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< b >
script.aculo.us Sorting
ghosting option
</ b >
< ul id = "list" >
< li >tag</ li >
< li >overlap</ li >
< li >constraint</ li >
< li >containment</ li >
< li >handle</ li >
</ ul >
< script >
Sortable.create('list',
{
tag: 'li',
// Setting the ghosting
// parameter to false
ghosting: false
}
);
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, the ghosting option is set to “true”.
HTML
<!DOCTYPE html>
< html >
< head >
< script type = "text/javascript"
src = "prototype.js" >
</ script >
< script type = "text/javascript"
src = "scriptaculous.js" >
</ script >
< style >
li {
cursor: move;
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< b >
script.aculo.us Sorting
ghosting option
</ b >
< ul id = "list" >
< li >tag</ li >
< li >overlap</ li >
< li >constraint</ li >
< li >containment</ li >
< li >handle</ li >
</ ul >
< script >
Sortable.create('list',
{
tag: 'li',
// Setting the ghosting
// parameter to true
ghosting: true
}
);
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...