Hola amigos:
Estoy haciendo una pequeña aplicación con una lista de divs los cuales son ordenables linealmente, hasta ahi todo bien. El problema que tengo es que al hacer un zoom in u out via JavaScript, la función sortable de Jquery no funciona correctamente.
Les dejo un link con la aplicación:
http://nobilis.cl/control_impacto/
Alguna forma de hacer Zoom sin que afecte la función sortable? He probado muchas formas y ninguna me funciona correctamente.
Espero puedan ayudarme como siempre lo han echo, saludos :).
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Control Impacto - Prototipo</title>
<?php
include("includes/css.php");
include("includes/js.php");
?>
<script>
$(document).ready(function(){
$("#browser").treeview({
toggle: function() {
console.log("%s was toggled.", $(this).find(">span").text());
}
});
$("#add").click(function() {
var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
"<li><span class='file'>Item1</span></li>" +
"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
$("#browser").treeview({
add: branches
});
});
});
//***********************************************************************//
// botones jquery
// todos los botones deben tener la class .botones
//***********************************************************************//
$(function() {
$( "input:submit, a, button", ".botones" ).button();
$( "a", ".botones" ).click(function() { return false; });
$("div.multibuttonset").sortable({
items: '.button:has(.active)'
});
$( ".button" ).addClass( "ui-widget ui-corner-all" );
$( ".active" ).addClass( "ui-widget ui-widget-content ui-corner-all" );
$( ".active3" ).addClass( "ui-widget ui-widget-content ui-corner-all" );
});
var lineas=3
var cajas=4;
function activar_boton(x)
{
//$("#boton1").css('background-color', '#32CD32');
if ($('#active'+x).hasClass('ui-state-focus') == false)
{
$("#active"+x ).removeClass("ui-state-default");
$("#active"+x ).addClass("ui-state-focus");
$("#contenedor"+x).css('background-color', '#32CD32');
}
else
{
$("#active"+x ).removeClass( "ui-state-focus" );
$("#active"+x ).addClass( "ui-state-default" );
$("#contenedor"+x).css('background-color', 'white');
}
}
function crear_cuadros()
{
//$("#cuadros").append(html);
}
</script>
<style>
#cuadros
{
height: 100%;
vertical_align: bottom;
position:relative;
top: 0px;
}
.button
{
float:left;
width:100px;
height:100px;
border-style:solid;
border-width:3px;
padding:3px;
margin:10px;
background-color:white;
}
.active
{
/*border-style:solid; */
padding:2px;
margin:2px;
width:22px;
height:22px;
float:right;
}
.active2
{
border-style:none;
padding:2px;
margin:2px;
width:87px;
height:20px;
position:relative;
bottom:-35px;
text-align:center;
}
.active3
{
border-style:solid;
padding:2px;
margin:2px;
width:20px;
height:20px;
float:right;
position:relative;
bottom:-40px;
left:30px;
}
</style>
</head>
<body id="main" onload="crear_cuadros()">
<?php
error_reporting(E_ERROR);
include ("includes/header.php");
?>
<div class="marco ui-widget ui-widget-content ui-corner-all">
<div class="cuerpo">
<!--<div class="columna_derecha">
</div> ui-widget ui-widget-content ui-corner-all -->
<div class="columna_izquierda ui-widget ui-widget-content ui-corner-all">
<!-- MENU -->
<ul id="browser" class="filetree treeview-famfamfam">
<li> <span class="folder"> <b> Menú </b></span>
<ul>
<li><span class="folder"><input type="checkbox" id="check_tree" checked/> Proceso de Negocio</span>
<ul>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> Acciones</span></li>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> Forward</span></li>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> Pacto</span></li>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> FFMM y FIP</span></li>
</ul>
</li>
<li><span class="folder"><input type="checkbox" id="check_tree" checked/> Aplicación de Negocio</span>
<ul>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> PdN</span></li>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> Core Inversiones</span></li>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> Core Crédito</span></li>
</ul>
</li>
<li><span class="folder"><input type="checkbox" id="check_tree" checked/> Sistema</span>
<ul>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> BEE Bank</span></li>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> ERP</span></li>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> Quartz</span></li>
<li><span class="file"><input type="checkbox" id="check_tree" checked/> Efacture</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="columna_central" class="columna_central ui-widget ui-widget-content ui-corner-all">
<input type="radio" id="z100" name="group2" value="100"/> 100%<br/>
<input type="radio" id="z80" name="group2" value="80" checked="checked"/> 80%<br/>
<input type="radio" id="z60" name="group2" value="60" /> 60%<br/>
<br/>
<div id="cuadros" class="block">
<div class="multibuttonset "><p>Proceso de Negocio</p>
<div class="button" id="contenedor1">
<div class="active ui-state-default" onclick="activar_boton(1)" id="active1"></div>
<div class="active2">Acciones</div>
<div class="active3"></div>
<div class="active3"></div>
</div>
<div class="button" id="contenedor2">
<div class="active ui-state-default" onclick="activar_boton(2)" id="active2"></div>
<div class="active2">Fordwar</div>
<div class="active3"></div>
<div class="active3"></div>
</div>
<div class="button">
<div class="active"></div>
<div class="active2">Pacto</div>
<div class="active3"></div>
<div class="active3"></div>
</div>
<div class="button">
<div class="active"></div>
<div class="active2"></div>
<div class="active3"></div>
<div class="active3"></div>
</div>
<div class="button">
<div class="active"></div>
<div class="active2"></div>
<div class="active3"></div>
<div class="active3"></div>
</div>
</div>
</div>
<script>
$("#z100").click(function () {
$(".block").animate({ zoom: 1.4 });
}
);
$("#z80").click(function () {
$(".block").animate({ zoom: 1 });
}
);
$("#z60").click(function () {
$(".block").animate({ zoom: 0.7 });
}
);
</script>
</div>
</div>
</div>
<?php
include("includes/footer.php");
?>
</body>
</html>