Buenas, estoy utilizando jquery y jquery ui, y estoy haciendo que un div sea draggable. COmo los divs que quiero que sean draggables son cargados dinamicamente he tenido que crear una funcion llamada livedraggable. A continuacion os pongo el codigo que uso para el livedraggable, y la parte del draggable con los metodos que necesito.
Código Javascript
:
Ver originalfunction liveDraggable(selector, options){
jQuery(selector).live("mouseover",function(){
if (!jQuery(this).data("init")) {
jQuery(this).data("init", true);
jQuery(this).draggable(options);
}
});
}
$(document).ready(function(){
var abierto=0; //
liveDraggable("div.widget",{
cancel: '.noDraggable',
cursor: "move",
cursorAt: { top: 15, left: 15 },
//iframeFix: true,
//handle: '.w_acciones, .mover_comunidad',
containment: '.contenido_widgets',
helper : function() {
//ordenZ();
var div = $(this);
top_mover_widget=div.css("top");
left_mover_widget=div.css("left");
div.css("z-index", -8000);
$("#capaFixDraggable").css("z-index", 8000);
return '<div class="ghost-x red_todo_5"></div>';
},
stop: function(){
var div = $(this);
div.css("top", $('.ghost-x').css("top")).css("left", $('.ghost-x').css("left")).css("z-index", 1003); // Le ponemos en la posicion y volvemos la opacidad del widget a 1.
$("#capaFixDraggable").css("z-index", -8000);
$("#menu_escritorios").css('z-index', '-9999'); // Ocultamos el menu de cambio de escritorio
escritorio=0; // Ponemos a cero para decirle que el panel de escritorios esta cerrado
// Condiciones por si superan el top o height y que no queden medio ocultos
var win = $(window),
alto_pantalla = win.height(),
ancho_pantalla = win.width(),
nuevo_top = parseInt(div.css("top")),
nuevo_left = parseInt(div.css("left")),
status_height = $("#status_bar_widgets").height(),
cabeza_height = $("#cabeza").height();
// Que no pase por ABAJO
if((nuevo_top + div.outerHeight(true)) > alto_pantalla - status_height){
nuevo_top = alto_pantalla - status_height - div.outerHeight(true) - 7; // 15 tiene que ser por los margenes para que se adapte al pie del escritorio
}
// Que no pase por la DERECHA
if((nuevo_left+ div.outerWidth(true)) > ancho_pantalla-14){
nuevo_left = ancho_pantalla - div.outerWidth(true)-14;
}
// Que no pase por ARRIBA
if(nuevo_top < cabeza_height + 5){
nuevo_top = cabeza_height + 5;
}
// Que no pase por la IZQUIERDA
if(nuevo_left < 0){
nuevo_left=0;
}
div.css("top", nuevo_top+"px").css("left", nuevo_left+"px");
// Guardamos la posicion de los widgets
var top = nuevo_top+"px",
left = nuevo_left+"px",
ancho = ancho_pantalla,
alto = alto_pantalla,
z = 1003;
idd_widget = div.attr('idd');
$.post(ruta_ajax+"&carpeta=widgets&s=1", {widget:idd_widget, top:top, left:left, ancho:ancho, alto:alto, z:z});
return false;
}
});
})
El problema que tengo es que la aplicacion se me relentiza una barbaridad... mas cuanto mas antiguo sea el ordenador... entonces
¿Veis algo que pudiera estar poco optimizado o mal programado?
Lo que hago es mostrar un div al empezar el draggable, por que mover directamente el div con el contenido inicial relentiza mucho, por el hecho de mover el contenido por encima de todo el resto que hay en la pagina.... con lo que añado un div vacio de color chillon... Despues en el stop compruebo que no pase del ancho y alto de la pantalla, para que quede dentro.
El principal problema lo tengo al empezar el draggable... supongo que en el helper... pero en el helper no veo nada problematico :S, es muy simple...
Alguna idea??