La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. El módulo Arrastrar y soltar se puede usar para hacer que cualquier elemento se pueda arrastrar y también permite que se suelten en una zona de colocación.
La opción onHover se usa para especificar una función de devolución de llamada que se activa cuando un elemento arrastrable adecuado se desplaza sobre el objetivo flotante.
Sintaxis:
{onHover: function}
Parámetros : esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación:
- función : esta es una función de devolución de llamada que se invocaría cada vez que el elemento se desplazara sobre el objetivo flotante.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop onHover option</title>
<script type="text/javascript"
src="/javascript/prototype.js">
</script>
<script type="text/javascript"
src="/javascript/scriptaculous.js">
</script>
<style>
#draggables {
border: 3px ridge blueviolet;
float: left;
padding: 9px;
}
#hoverarea {
display: flex;
flex-direction: column;
float: left;
margin-left: 40px;
width: 300px;
height: 300px;
border: 3px ridge blue;
text-align: center;
font-size: 24px;
}
.container {
position: relative;
text-align: center;
color: white;
}
#over {
display: none;
}
.hoverActive {
background-color: #8cdd81;
}
</style>
<script type="text/javascript">
window.onload = function () {
// Make the image draggable
$A($('draggables').getElementsByTagName(
'img')).each(function (item) {
new Draggable(item, {
revert: true, ghosting: true
});
});
Droppables.add(
'hoverarea', {
hoverclass: 'hoverActive',
onHover: moveItem
});
}
// We want display a text when we are
// over the hover area
function moveItem(draggable, hoverarea) {
document.getElementById(
"over").style.display = "block";
}
</script>
</head>
<body>
<!-- Draggable image -->
<div id="draggables">
<img height=100px width=100px src="gfg.png" />
</div>
<!-- Hover Area -->
<div id="hoverarea">
<p>Hover over this area</p>
<div class="container">
<div id="over">Over the hover area</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por parasmadan15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA