Esta opción codiciosa de arrastrar y soltar de script.aculo.us se utiliza para detener el procesamiento al pasar el cursor por otro elemento desplegable, debajo del gablete de arrastrar no se buscará. El valor predeterminado de esta opción es true, lo que significa que el área de colocación aceptará el elemento que se puede arrastrar y false no lo hará.
Sintaxis:
Droppables.add('element', {greedy: false or true});
Ejemplo:
html
<!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',
greedy: false, 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
greedy Option
</strong>
<div id="draggables">
<img src="gfg.png">
<img src="gfg1.png">
</div>
<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: el área de soltar no aceptará el elemento.
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA