Tecnologia de Programação 1 e 2 (2009) » jQuery UI http://www.brunocampagnolo.com/2009tp PUCPR > Bacharelado em Sistemas de Informação > 3o e 4o Períodos Fri, 18 Dec 2009 10:40:02 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Dicas rápidas – ExF03 – Drag & Drop em jQuery http://www.brunocampagnolo.com/2009tp/2009/04/22/dicas-rapidas-exf03-drag-drop-em-jquery/ http://www.brunocampagnolo.com/2009tp/2009/04/22/dicas-rapidas-exf03-drag-drop-em-jquery/#comments Wed, 22 Apr 2009 15:57:42 +0000 admin http://www.brunocampagnolo.com/2009tp/?p=239 Na aula sobre drag e drop também apresentei exemplos de drag e drop em jQuery.

Veja o exemplo que coloquei na aula 13:
http://www.brunocampagnolo.com/2009tp/2009/04/02/aula-13-dicas-para-o-exercicio-f03-drag-drop/

Link direto para o exemplo:
http://www.brunocampagnolo.com/2009tp/wp-content/uploads/2009/04/exemplosdragedrop.zip

Observe que se for necessário clonar um objeto, será necessária a criação do draggable com esta opção:


$(".myDrag").draggable({helper: 'clone' });

A seguir, em anexo e no jsbin, 


<!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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <title></title>

    <style type="text/css">
        .myDrag
        {
           background: red;
           border: 2px black solid;
           width: 200px;
           font-size: xx-large;
        }
        .myDrop
        {

           background: green;
           border: 2px black solid;
           width: 400px;
           height: 100px;
           font-size: xx-large;

        }
        .jahArrastado {
           background: blue;
           border: 2px black solid;
           width: 200px;
           font-size: xx-large;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            // Transforma em um elemento arrastável
            $(".myDrag").draggable({helper: 'clone' });
            // Transforma em um elemento foco de drop
            $("#drop1").droppable({

                // Chama a função quando terminar o arrastar
                drop: function(event, ui) {

                    // Se já tiver sido arrastado anteriormente,
                    if(!$(ui.draggable).hasClass("jahArrastado"))
                    {
                      // Obtém a posição que o elemento foi arrastado
                      var x = ui.position.left;
                      var y = ui.position.top;
                      // Clona o elemento
                      var m = $(ui.draggable).clone();
                      m.css("position", "absolute");
                      m.css("left",x);
                      m.css("top",y);
                      m.attr("class", "jahArrastado");
                      m.html("Jah fui arrastado!");
                      // Altera o elemento arrastado para um elemento que não
                      // pode ser arrastado
                      m.draggable({helper: 'original'});
                      // Adiciona ao container
                      $(this).append(m);

                    }

                }
            });
            $("#lixeira").droppable({
              drop: function(event, ui) {
                // Só elementos arrastados podem ser removidos
                if($(ui.draggable).hasClass("jahArrastado"))
                {
                  $(ui.draggable).remove();
                }

              }
            });

        });
    </script>
</head>
<body>
<div class="myDrag" id="drag1">Posso ser arrastado!</div>
<div class="myDrop" id="drop1">Arraste algo aqui!</div>
<div class="myDrop" id="lixeira">Lixeira</div>
</body>
</html>
]]> http://www.brunocampagnolo.com/2009tp/2009/04/22/dicas-rapidas-exf03-drag-drop-em-jquery/feed/ 0 Aula 14 – Dicas para Exercício F03 – Class Library http://www.brunocampagnolo.com/2009tp/2009/04/04/aula-14-dicas-para-exercicio-f03-class-library/ http://www.brunocampagnolo.com/2009tp/2009/04/04/aula-14-dicas-para-exercicio-f03-class-library/#comments Sat, 04 Apr 2009 12:45:15 +0000 admin http://www.brunocampagnolo.com/2009tp/?p=186 Uma das exigências do Exercício F03 é a criação de uma interface Web e de uma interface Windows Forms que compartilhem do mesmo algoritmo para cálculo de custo.

Ao invés de repetirmos nossas classes responsáveis por este cálculo é recomendável o uso de uma Class Library (dll) para centralização de nossas classes compartilhadas.

Segue a seguir, um exemplo de utilização de uma class library para uma interface Web:

]]> http://www.brunocampagnolo.com/2009tp/2009/04/04/aula-14-dicas-para-exercicio-f03-class-library/feed/ 1 Aula 13 – Dicas para o Exercício F03 – Drag & Drop http://www.brunocampagnolo.com/2009tp/2009/04/02/aula-13-dicas-para-o-exercicio-f03-drag-drop/ http://www.brunocampagnolo.com/2009tp/2009/04/02/aula-13-dicas-para-o-exercicio-f03-drag-drop/#comments Thu, 02 Apr 2009 22:13:11 +0000 admin http://www.brunocampagnolo.com/2009tp/?p=175 O exercício F03, parcial de nosso sistema de cemitério, tem uma interface bastante elaborada para simular um sistema de gerenciamento de velório.

Uma das possíveis técnicas que podem ser aplicadas para a construção da interface de exercício é o padrão de interface drag e drop.

Nesta aula, ilustraremos um exemplo de utilização de drag e drop em uma interface desktop, construída através da biblioteca Windows Forms e outro exemplo usando a biblioteca jQuery Ui.

Os exemplos utilizados nesta aula são:

  • ExemploCriaçãoComponentes: exemplo em C#/Windows Forms demonstrando a manipulação em tempo de execução dos componentes. Este exemplo será útil para o entendimento de como pode ser a criação dinâmica de uma interface.
  • ExemploDragEDrop: exemplo em C#/Windows Forms demonstrando funcionalidade básica de drag e drop.
  • ExemploDragEDrop: exemplo em JavaScript/jQuery demonstrando funcionalidade básica de drag e drop utilizando os componentes de interação draggable e droppable.

Importante, o framework jQuery Ui é bastante rico em controles. Veja outros exemplos!

A apresentação associada a aula vai em anexo (mirror).

Discover Simple, Private Sharing at Drop.io

]]> http://www.brunocampagnolo.com/2009tp/2009/04/02/aula-13-dicas-para-o-exercicio-f03-drag-drop/feed/ 2 jQuery UI http://www.brunocampagnolo.com/2009tp/2009/03/27/jquery-ui/ http://www.brunocampagnolo.com/2009tp/2009/03/27/jquery-ui/#comments Fri, 27 Mar 2009 15:38:35 +0000 admin http://www.brunocampagnolo.com/2009tp/?p=95 A biblioteca jQuery UI é um complemento à biblioteca jQuery com componentes ricos de interface. Além destes componentes, a biblioteca também tem um alto poder de customização de interface via aplicação de temas e uma poderosa ferramenta de edição de tema.

Abaixo, apresentação referente a esta biblioteca.

Download e Visualização:

]]> http://www.brunocampagnolo.com/2009tp/2009/03/27/jquery-ui/feed/ 1