Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema con Jquery Sortable y Zoom

Estas en el tema de Problema con Jquery Sortable y Zoom en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/01/2014, 19:40
Avatar de Game[DxS]  
Fecha de Ingreso: noviembre-2003
Ubicación: Concepción Chile
Mensajes: 100
Antigüedad: 15 años, 10 meses
Puntos: 0
Problema con Jquery Sortable y Zoom

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>
  #2 (permalink)  
Antiguo 28/01/2014, 09:21
Avatar de Game[DxS]  
Fecha de Ingreso: noviembre-2003
Ubicación: Concepción Chile
Mensajes: 100
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Problema con Jquery Sortable y Zoom

nadie tiene un zoom que funcione? =(

Etiquetas: funcion, html, input, javascript, jquery, js, php, sortable, zoom
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:02.