Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
Drag 'n' Drop with hoverclass Option
Description:
This is the name of a CSS class that will be added to element while the droppable is active (has an acceptable draggable hovering over it). Defaults to null.
Syntax:
Droppables.add('element', {hoverclass: 'cssClass'});
|
Here cssClass is a CSS class and will be applied to the element.
Example:
In this example drop area becomes ligh yellow when you tried tro drop an item in that area.
<html>
<head>
<title>Drag and Drop Example</title>
<script type="text/javascript"
src="/javascript/prototype.js"></script>
<script type="text/javascript"
src="/javascript/scriptaculous.js"></script>
<script type="text/javascript">
window.onload = function() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(
function(item) {
new Draggable(
item,
{
revert: true,
ghosting: true
}
);
}
);
Droppables.add(
'droparea',
{
hoverclass: 'hoverActive',
onDrop: moveItem
}
);
// Set drop area by default non cleared.
$('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type="text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="draggables">
<img src="/images/html.gif"/>
<img src="/images/css.gif"/>
<img src="/images/xhtml.gif"/>
<img src="/images/wml_logo.gif"/>
<img src="/images/javascript.gif"/>
</div>
<div id="droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>
|
To understand it in better way you can Try it yourself.
|
|
|