Dicas rápidas – ExF03 – Drag & Drop em jQuery

22 abril, 2009 (12:57) | dúvida | Por: admin

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>

Tags: , , , , ,

Escreva um comentário