Tecnologia de Programação 1 e 2 (2009) » drag&drop 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 de imagem em Windows Forms http://www.brunocampagnolo.com/2009tp/2009/04/22/dicas-rapidas-exf03-drag-drop-de-imagem-em-windows-forms/ http://www.brunocampagnolo.com/2009tp/2009/04/22/dicas-rapidas-exf03-drag-drop-de-imagem-em-windows-forms/#comments Wed, 22 Apr 2009 17:43:12 +0000 admin http://www.brunocampagnolo.com/2009tp/?p=243 Pode ser interessante exibir uma imagem ao invés do cursor padrão do mouse.
Para isso, é necessário trocar o cursor através da propriedade Cursor.Current e, no evento GiveFeedback do drop target impedir a exibição dos cursores padrão ( e.UseDefaultCursors = false).
Dê uma olhada no exemplo em anexo.

]]> http://www.brunocampagnolo.com/2009tp/2009/04/22/dicas-rapidas-exf03-drag-drop-de-imagem-em-windows-forms/feed/ 0 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 Dicas rápidas – ExF03 – Drag & Drop de elemento criado dinamicamente http://www.brunocampagnolo.com/2009tp/2009/04/11/dicas-rapidas-exf03-drag-drop-de-elemento-criado-dinamicamente/ http://www.brunocampagnolo.com/2009tp/2009/04/11/dicas-rapidas-exf03-drag-drop-de-elemento-criado-dinamicamente/#comments Sat, 11 Apr 2009 15:46:47 +0000 admin http://www.brunocampagnolo.com/2009tp/?p=203 Em sua interface pode ser necessária a criação de elementos em tempo de execução.
Anteriormente, na Aula 11, percebemos que esta criação se dá através da instanciação do elemento que se deseja inserir na interface e de sua colocação no container desejado através do método Add da coleção Controls.

Exemplo:


// Cria uma instância de botão
Button b = new Button();
// Determina o tamanho na tela
b.Size = new Size(30, 30);
// Coloca na posição 100, 100
b.Location = new Point(100, 100);
// Adiciona no formulário
this.Controls.Add(b);

Se for necessária a criação de um componente em tempo de execução e que possua funcionalidade de drag&drop o evento MouseDown também deve ser considerado.


// Cria uma instância de botão
Button b = new Button();
// Determina o tamanho na tela
b.Size = new Size(30, 30);
// Coloca na posição 100, 100
b.Location = new Point(100, 100);
// Determina o evento de mouse down para indicar
// o drag & drop
b.MouseDown += new MouseEventHandler(b_MouseDown);
// Adiciona no formulário
this.Controls.Add(b);
...
void b_MouseDown(object sender, MouseEventArgs e)
{
       this.DoDragDrop(sender, DragDropEffects.Move);
}

Em anexo, exemplo de aplicação desta ideia.

]]> http://www.brunocampagnolo.com/2009tp/2009/04/11/dicas-rapidas-exf03-drag-drop-de-elemento-criado-dinamicamente/feed/ 0