Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
Drag 'n' Drop with Containment Option
Description:
This specifies an element, or array of elements, that must be a parent of a draggable item in order for it to be accepted by the drop target. By default, no containment constraints are applied.
Syntax:
Droppables.add('element',
{containment: element ID or array of parent's IDs});
|
Example:
In this example you will be able to drop only images whose parant ID is "niceOne".
<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
}
);
}
);
// Make all the images draggables from niceOne division.
$A($('niceOne').getElementsByTagName('img')).each(
function(item) {
new Draggable(
item,
{
revert: true,
ghosting: true
}
);
}
);
Droppables.add(
'droparea',
{
hoverclass: 'hoverActive',
containment: '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;
}
#niceOne {
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;
}
#niceOne img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="niceOne">
<img src="/images/html.gif"/>
<img src="/images/xhtml.gif"/>
<img src="/images/javascript.gif"/>
</div>
<div id="draggables">
<img src="/images/css.gif"/>
<img src="/images/wml_logo.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.
|
|
|