Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Eduardo Villa

[Resolvido] Problemas com jQuery UI Draggable

Por , em Javascript

Recommended Posts

Eduardo Villa    2

Eduardo Villa
Postado

Salve galera!

Estou fazendo alguns teste com jQuery UI Draggable e quanto a arrastar, pegar o posicionamente da <DIV> ao soltar está ok. Mas não estou conseguindo fazer o seguinte:

- Tenho duas <DIV>s e ao clicar em uma, gostaria que a selecionada ficasse acima da outra...

OBS: no caso a segunda <DIV> fica abaixo da outras

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="js/jquery.1.6.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.draggable{background:#000; width:150px; height:150px; padding:0.5em;}
.draggable1{background:#F00; width:150px; height:150px; padding:0.5em;}



</style>
<script>
	$(function(){
		$(".draggable").draggable();
		$(".draggable1").draggable();
	});
</script>
</head>
<body>

<div class="demo">

   <div class="draggable"> <p>Drag me around</p> </div>

   <div class="draggable1"> <p>Drag me around1</p> </div>

</div>
</body>
</html>

 

Caso alguém tenha alguma outra forma, me avise... Valew

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardo Villa    2

Eduardo Villa
Postado

assim ele arrasta por cima da outra <DIV>, mas quando solta não fica acima...

$(".draggable").draggable({
   zIndex: 300
});

 

Galera assim funciona! Mas queria saber se gostaria de fazer o seguinte... Arrastar ele já fica acima da outra <DIV> sem precisar utilizar o CLICK();

 

 <style>
     .teste {width:150px; height:150px; position:absolute; top:0px; left:0px; z-index:0;}
         .top {z-index:100!important; position:relative;}
         .bottom {z-index:5!important; position:relative;}
 </style>

 <script>
     $(document).ready(function(){
         $('.teste').draggable().click(function(){
             $(this).addClass('top').removeClass('bottom');
             $(this).siblings().removeClass('top').addClass('bottom');
         });
     });
 </script>

 

 

  <div class="teste" style="background:#000; color:#FFF;">Teste1</div>
  <div class="teste" style="background:#F00; color:#000;">Teste2</div>

 

Pode colocar resolvido... Valew

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito