Jquery
29 views
Skip to first unread message
Grupo SEO
Nov 6, 2008, 7:30:22 AM11/6/08
to Ajax-es
Lo que me gustaria es hacer como una papelera donde se arrastran unos
elementos (div's) y que cuando se suelte encima de la papelera este
genere un ajax request o algo parecido para que a traves de un script
se elimine X de la base de datos.
Aclaración. Listado de fotografias que cuando se arrastran sobre una
papelera esta desaparece y hace un ajax request ejecutando un script
que ya tengo realizado para que elimine la foto de la base de datos.
El problema es que no se donde colocar la funcion del ajax request y
tampoco como conseguir por ejemplo el ID del contenedor DIV porque lo
que aria seria asignar en el div de la fotografia el numero de ID de
la base de datos y cuando se iciera el ajax request enviaria la
variable id_foto con el numero id del div
alquien podria ayudarme por favor???????? Gracias de antemano saludos
a todos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".block").draggable({helper: 'clone'});
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append("<br>Dropped!");
}
});
});
</script>
<style>.block {
position: absolute;
top: 5px;
left: 5px;
border: 2px solid #0090DF;
background-color: #68BFEF;
width: 75px;
height: 75px;
margin: 10px;
z-index: 100;
}
.drop {
background-color: #e9b96e;
border: 3px double #c17d11;
width: 150px;
height: 70px;
margin: 10px;
position: absolute;
top: 5px;
right: 5px;
opacity: 0.7;
overflow:auto;
}
.droppable-active {
opacity: 1.0;
}
.droppable-hover {
outline: 1px dotted black;
}</style>
</head>
<body>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/
ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/
ui.draggable.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/
ui.droppable.js"></script>
<div class="block">drag me!</div>
<div class="drop">drop on me!</div>
</body>
</html>
elementos (div's) y que cuando se suelte encima de la papelera este
genere un ajax request o algo parecido para que a traves de un script
se elimine X de la base de datos.
Aclaración. Listado de fotografias que cuando se arrastran sobre una
papelera esta desaparece y hace un ajax request ejecutando un script
que ya tengo realizado para que elimine la foto de la base de datos.
El problema es que no se donde colocar la funcion del ajax request y
tampoco como conseguir por ejemplo el ID del contenedor DIV porque lo
que aria seria asignar en el div de la fotografia el numero de ID de
la base de datos y cuando se iciera el ajax request enviaria la
variable id_foto con el numero id del div
alquien podria ayudarme por favor???????? Gracias de antemano saludos
a todos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".block").draggable({helper: 'clone'});
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append("<br>Dropped!");
}
});
});
</script>
<style>.block {
position: absolute;
top: 5px;
left: 5px;
border: 2px solid #0090DF;
background-color: #68BFEF;
width: 75px;
height: 75px;
margin: 10px;
z-index: 100;
}
.drop {
background-color: #e9b96e;
border: 3px double #c17d11;
width: 150px;
height: 70px;
margin: 10px;
position: absolute;
top: 5px;
right: 5px;
opacity: 0.7;
overflow:auto;
}
.droppable-active {
opacity: 1.0;
}
.droppable-hover {
outline: 1px dotted black;
}</style>
</head>
<body>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/
ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/
ui.draggable.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/
ui.droppable.js"></script>
<div class="block">drag me!</div>
<div class="drop">drop on me!</div>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages