Hola, estoy desarollando listas de categorias multinivel. Lo que quiero hacer es que pueda arrastrar una categoria dentro de otra y al hacer esto la categoria pase a ser una subcategoria de la categoria hacia donde fue arrastrado.
Para ello incluyo.
Código HTML:
<script type="text/javascript" src="/scripts/jquery/jquery.ui/ui.core.js"></script>
<script type="text/javascript" src="/scripts/jquery/jquery.ui/ui.draggable.js"></script>
<script type="text/javascript" src="/scripts/jquery/jquery.ui/ui.droppable.js"></script>
EL codigo de la lista es:
Código HTML:
<ul class="categories">
<li class="category" id="category_2">
<div class="category_content">
<a href="2" class="title">Cars</a>
</div>
<div style="display: none;" class="children" id="category_children_2"></div>
</li>
<li class="category" id="category_2">
<div class="category_content">
<a href="2" class="title">Books</a>
</div>
<div style="display: none;" class="children" id="category_children_2"></div>
</li>
</ul> ASi que para activar el drag and drop uso:
Código HTML:
<script type="text/javascript">
$(document).ready(function(){
$(".category").draggable({helper: 'clone'});
$(".category_content").droppable({
accept: ".category",
drop: function(ev,ui) {
$(this).append($(ui.draggable));
alert('he sido arrastrado!!');
}
});
});
</script> Pero solo me funciona el drag, ya que al hacer el drop no me muestra ningun alert (deberia moestrarme el alert 'he sido arrastrado').
Alguien tiene alguna idea?