Esta opción de contención de arrastrar y soltar de script.aculo.us se utiliza para crear una array de elementos. Eso tiene que ser padre y el área de colocación solo los aceptará, puede arrastrar un elemento arrastrable a un área de colocación. En esa área de colocación, el elemento se colocará si la Contención es la misma que la identificación del padre del elemento que se puede arrastrar.
Sintaxis:
Droppables.add('element',
{containment: element ID or array of parent's IDs}
);
Valores:
- ID: esta opción toma el ID del elemento o la array de ID de los padres.
Ejemplo: En este ejemplo, la segunda imagen es aceptada por el área de colocación, la razón de ello es el padre de la Contención de la segunda imagen si ‘gfg’. Cada hijo de ese padre será aceptado por el área de descenso.
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 () {
$A($('draggables').getElementsByTagName('img'))
.each(function (item) {
new Draggable(item, {
revert: true,
ghosting: true
});
});
$A($('gfg').getElementsByTagName('img'))
.each(function (item) {
new Draggable(item, {
revert: true,
ghosting: true
});
});
Droppables.add('droparea', {
hoverclass: 'hoverActive',
containment: 'gfg',
onDrop: moveItem
});
// Set drop area default non cleared.
$('droparea').cleared = false;
}
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: 550px;
height: 73px;
}
#gfg {
width: 550px;
height: 73px;
}
#droparea {
float: left;
width: 650px;
height: 90px;
border: 2px solid gray;
text-align: center;
font-size: 16px;
padding: 12px;
}
</style>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
<p>A Computer Science Portal for Geeks</p>
</div>
<strong>
script.aculo.us Drag & Drop
Containment Option
</strong>
<div id="draggables">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png">
</div>
<br><br>
<div id="gfg">
<img src=
"https://image4.owler.com/logo/geeks-for-geeks_owler_20180809_174139_original.png">
</div>
<br><br><br><br><br>
<div id="droparea">
Drag the Image and Drop Your
Image in this area
</div>
</body>
</html>
Producción:
- Antes de arrastrar y soltar:
- Después de arrastrar y soltar:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA