Esta opción de clase flotante de arrastrar y soltar de script.aculo.us se utiliza para crear una clase flotante activa en la que puede arrastrar un elemento arrastrable a un área de colocación. En esa área de colocación, se colocará el elemento. Este es el nombre de una clase CSS que se agregará a un elemento mientras la opción desplegable esté activa.
Sintaxis:
Droppables.add('element', {hoverclass: 'cssClass'});
Ejemplo: El siguiente ejemplo ilustra la opción de clase flotante de arrastrar y soltar de script.aculo.us.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="scriptaculous-js-1.9.0/lib/prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous-js-1.9.0/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 });
});
Droppables.add(
"droparea", {
hoverclass: "hoverActive",
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;
}
#droparea {
float: left;
width: 550px;
height: 73px;
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 hoverclass Option
</strong>
<div id="draggables">
<img src="gfg.png" />
</div>
<div id="droparea">
Drag the Image and Drop Your Image in this area
</div>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA