Ir para conteúdo

POWERED BY:

Arquivado

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

MundiSsa

[Resolvido] Delimitando espaço para Drag and Drop Box

Por , em PHP

Recommended Posts

MundiSsa    0

MundiSsa
Postado

Olá,

 

Gente eu gostaria de saber como faço para delimitar uma área para uma Drag and Drop Box.

 

<div id="conteudo">
    <h1><?=$moduloTitulo?></h1>

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
    #draggable { width: 100px; height: 70px; background: silver; }
  </style>
  <script>
  $(document).ready(function() {
    $("#draggable").draggable();
  });
  </script>
</head>
  
<div id="draggable">Drag me</div>

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

É isso, eu queria delimitar uma área onde essa box pudesse navegar.

 

Aguardo a ajuda de vocês.

 

Obrigado

 

Ps.:Como sou iniciante eu nao sei bem em qual forum esta dúvida deveria estar, eu coloquei no de PHP porque, é com ele que estou integrando. Tentei encontrar um forum para JQUERY mais não encontrei. Me desculpe se postei a dúvida no forum errado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MundiSsa    0

MundiSsa
Postado

Valeu Wesley, obrigado pela ajuda.

 

Galera consegui deixar o código funcionando belezinha, eu ia postar pra vocês só que ficou na empresa. Segunda feira eu passo o código completo com Draggable e até com Fade IN e OUT da box.

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

MundiSsa    0

MundiSsa
Postado

Galera,

 

Segue o código da Box Draggable que tinha prometido postar.

 

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
    <style type="text/css">
  
	   .draggable { background-color: #000000; width:150px; height:90px; padding:0.5em; float:left; border:1px solid black;}
        #containment-wrapper { width:98%; height:440px;  padding:10px;}
    
    </style>
  
 <script type="text/javascript">
	
    $(function() {
	$("#draggable").draggable({ containment: '#containment-wrapper', scroll: false });
	});
     
    function fechardiv(div) {
    $("#"+div).hide("slow");
}
    
    </script>
 
</head>

    <body>

<div id="containment-wrapper">
<div style="position: relative; left: 0px; top: 2px;" id="draggable" class="draggable">
	<div align="right" style="margin: -4px -5px 0 0;">
    <img id="fechar" style="position: relative; right: auto; "src="../img/cancelar.png" alt="" width="18" height="18" onclick="javascript:fechardiv('draggable')" />
</div>
<p></p>
</div><br />
  
   
    </body>
</html>

AbraçoOOoOOOooOoo

Compartilhar este post

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

Informação importante

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

  Aceito