hola un saludo a la cominidad..
tengo un problema con un codigo al momento de soltar el elemento no se queda conde debe de ir...
aquí el código:
tengo un problema con un codigo al momento de soltar el elemento no se queda conde debe de ir...
aquí el código:
<html>
<head>
<title>Arrastrar y soltar ejemplo</title>
<style>
body{
font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
background: #EFF9FF;
}
#contenedor{
width: 600px;
margin: 10px auto;
}
#contenedor #acordeon{
width: 300px;
margin-right: 10px;
float: left;
}
#contenedor #cart{
width: 268px;
padding: 0px 10px 0px 10px;
float: left;
border: 1px solid #A6C9E2;
color: #415987;
background: #FCFDFD;
}
.drag, .eliminar{
font-size: 0.8em;
color: #ED890A;
visibility: hidden;
}
#acordeon li:hover{
cursor: pointer;
}
#acordeon li:hover span.drag, #cart ol li:hover a.eliminar{
visibility: visible;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#acordeon').accordion();
$('#acordeon').find('ul').find('li').draggable({
helper:'clone',
appendTo:'body'
});
$('#cart').find('ol').droppable({
//activeClass : 'ui-state-default',
//hoverClass : 'ui-state-hover',
drop : function(event, ui){
ui.draggable.find('.drag').remove();
$(this).find('.aqui').remove();
$(this).append('<li>'+ ui.draggable.text() + '<a href="#" class="eliminar">Eliminar</a></li>');
}
});
});
</script>
</head>
<body>
<div id="contenedor">
<div id="acordeon">
<h3><a href="#">Franelas</a></h3>
<div>
<ul>
<li>Franela Azul <span class="drag">Arrastrame!</span></li>
<li>Franela Blanca <span class="drag">Arrastrame!</span></li>
<li>Franela Roja <span class="drag">Arrastrame!</span></li>
</ul>
</div>
<h3><a href="#">Pantalones</a></h3>
<div>
<ul>
<li>Pantalon Azul <span class="drag">Arrastrame!</span></li>
<li>Pantalon Blanco <span class="drag">Arrastrame!</span></li>
<li>Pantalon Rojo <span class="drag">Arrastrame!</span></li>
</ul>
</div>
<h3><a href="#">Zapatos</a></h3>
<div>
<ul>
<li>Zapato Azul <span class="drag">Arrastrame!</span></li>
<li>Zapato Blanco <span class="drag">Arrastrame!</span></li>
<li>Zapato Rojo <span class="drag">Arrastrame!</span></li>
</ul>
</div>
</div>
<div id="cart">
<h3><a href="#">Carrito de Compras</a></h3 //aqui esta el problema me falto cerrar el h3 con ">"
<ol>
<li class='aqui'>Arrastrar Aqui!!</li>
</ol>
</div>
</div>
<script type="text/javascript">//document.write(drives());
</script>
</body>
</html>