Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
Drag 'n' Drop with accept Option
Description:
This is 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.
Syntax:
Droppables.add('element', {accept: 'cssClass'});
|
Here cssClass is a CSS class and only element with that class will be accepted in drop zone. You can specify an array of CSS classes.
Example:
In this example you will be able to drop only images with "niceOne" CSS class.
<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',
accept: 'niceOne',
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;
}
.niceOne {
border:10px dotted red;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="draggables">
<img class="niceOne" src="/images/html.gif"/>
<img src="/images/css.gif" />
<img class="niceOne" src="/images/xhtml.gif"/>
<img src="/images/wml_logo.gif"/>
<img class="niceOne" 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.
|
|
|