Elemento draggable de jQueryUI
Orientamos este artigo como se fosse uma lista de perguntas e respostas. Primeiro, esboçaremos todas elas de maneira independente e para terminar criaremos um exemplo global que colocará em prática o aprendido.
Como posso definir estilos CSS para os elementos draggables?
Quando se converte um elemento para que possa ser arrastado, invocando o plugin draggable, jQueryUI coloca automaticamente uma classe CSS chamada “ui-draggable”. Podemos usar essa classe para aplicar os estilos que queiramos aos elementos que possam ser arrastados.
.ui-draggable{
background: #feb;
}
Existe algum atalho para definir um estilo especial a ser utilizado momento em que se está arrastando um elemento?
Quando um elemento draggable está sendo arrastado, jQueryUI coloca de maneira automática uma classe CSS chamada “ui-draggable-dragging” que poderíamos utilizar para definir estilos que se aplicariam sobre o elemento unicamente quando está sendo arrastado.
.ui-draggable-dragging{
background: #def;
}
Existe alguma maneira de colocar um elemento draggable dentro de um conteiner e que, ao movê-lo, caso se ultrapasse o conteiner, saiam as barras de deslocamento?
Qualquer elemento draggable está realmente em um conteiner, ainda que seja o próprio documento global. Você pode colocá-lo em um conteiner simplesmente aninhando esse elemento arrastável no código HTML sobre esse conteiner. As barras de deslocamento quando o elemento sai do conteiner são conseguidas se você coloca no conteiner o atributo overflow: auto.
O código HTML seria:
<div id=”conteiner”>
<div id=”arrasteme”>Arraste esta camada!</div>
</div>
O código CSS do conteiner:
#conteiner{
width: 500px;
height: 300px;
border: 1px solid #ccc;
overflow: auto;
}
Posso conseguir que o elemento arrastável não ultrapasse nunca os limites marcados pelo conteiner?
A opção containment dos elementos draggable permite colocar varias possibilidades para definir que elementos devem trabalhar como conteiners. Ademais faz com que a posição do elemento arrastável se restrinja às que permita o espaço disponível no conteiner. Um valor típico seria ‘parent’, que indica que a etiqueta pai do elemento arrastável deve trabalhar como conteiner. Porém, também admite outros valores como ‘document’, ‘window’, um seletor ou inclusive umas coordenadas em um array como [100, 100, 300, 300], para que se restrinja ao espaço definido pelos dois pontos [x1, y1, x2, y2].
$(“#arrasteme”).draggable({
containment: ‘parent’
})
Em um evento, como posso obter uma referencia ao objeto jQuery que está sendo arrastado?
Você pode definir ações a serem realizadas quando arrasta um elemento, por meio do evento drag ou outros eventos como start ou stop. Dentro do código das funções definidas para esses eventos você pode acessar o objeto jQuery por meio da variável this. Mas lembre que para invocar métodos do framework você deve convertê-la em um objeto jQuery com a função dólar.
$(“#arrasteme”).draggable({
drag: function(event, ui){
$(this).html(“ui-state-highlight”);
}
})
Além do mais, você tem acesso a um helper, com uma referencia ao objeto que está sendo arrastado por meio do segundo parâmetro recebido pela função que executa o evento e a propriedade helper.
$(“#arrasteme”).draggable({
drag: function(event, ui){
ui.helper.html(“Estou sendo arrastado”);
}
})
Na função que define o evento drag você recebeu ui como segundo parâmetro. Por meio de ui.helper você tem o objeto jQuery que se está arrastando. Através desse objeto você pode invocar métodos de jQuery para fazer coisas com esse elemento como:
ui.helper.html(“Estou sendo arrastado”);
Isso faz com que seja mudado o HTML do elemento arrastado para colocar o texto “Estou sendo arrastado”.
Como posso saber a posição de um elemento arrastável?
No mencionado parâmetro ui, que se recebe na função que implementa um evento, à parte de helper, existem outras duas propriedades que te servirão para acessar a posição desse elemento. Ambas propriedades são objetos com atributos top e left, que podemos acessar para saber a posição do elemento.
Para obter a posição relativa ao conteiner onde está situado o elemento draggable se utiliza a propriedade “position”.
$(“#arrasteme”).draggable({
drag: function(event, ui){
$(“#posx”).text(ui.position.left);
$(“#posy”).text(ui.position.top);
}
})
Para acessar a posição absoluta, cuja origem de coordenadas seria o canto superior direito do espaço disponível para o documento HTML, se utiliza a propriedade “offset”.
$(“#arrasteme”).draggable({
drag: function(event, ui){
$(“#offsetx”).text(ui.offset.left);
$(“#offsety”).text(ui.offset.top);
}
})
Posso fazer com que o elemento arrastável se possa soltar em um lugar determinado e fazer coisas quando isto aconteça?
As possibilidades de implementar scripts com os elementos draggable são tantas quanto se deseje. Porém, no caso de arrastar e soltar em um lugar determinado teha em conta que jQueryUI dispõe de um plugin adicional chamado Droppable. Por meio dos elementos droppable podemos definir conteiners onde é possível soltar elementos draggable e existe um evento específico para fazer coisas quando se produza a ação de soltar. Ou seja, o elemento droppable já está preparado com a funcionalidade de detectar quando outro elemento tenha sido arrastado e soltado encima dele.
Exemplo que ilustra algumas perguntas e respostas sobre o elemento draggable
Agora vamos ver um exemplo onde colocamos em funcionamento os conhecimentos adquiridos ao responder as perguntas anteriores .
Podemos ver diretamente o código fonte, pois com o comentado anteriormente espero que o leitor possa identificar as partes do código que respondem as perguntas.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”
>
<html lang=”es”>
<head>
<title>Testando o comportamento draggable de jQueryUI</title>
<link type=”text/css” href=”css/blitzer/jquery-ui-1.8.16.custom.css” rel=”Stylesheet” id=”linkestilo” />
<style type=”text/css”>
body{
font-family: sans-serif;
}
h1{
padding: 10px;
font-size: 30px;
}
#conteiner{
width: 500px;
height: 300px;
border: 1px solid #ccc;
overflow: auto;
float: left;
}
#arrasteme{
position: relative;
top: 10px;
left: 20px;
width: 160px;
padding: 7px;
font-size: 10px;
font-weight: bold;
text-align: center;
}
#posicao{
font-size: 12px;
margin-left: 520px;
line-height: 150%;
}
.ui-draggable{
background: #feb;
}
.ui-draggable-dragging{
background: #def;
}
</style>
<script type=”text/javascript” src=”js/jquery-1.6.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.8.16.custom.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#arrasteme”).draggable({
containment: ‘parent’,
drag: function(event, ui){
$(“#posx”).text(ui.position.left);
$(“#posy”).text(ui.position.top);
$(“#offsetx”).text(ui.offset.left);
$(“#offsety”).text(ui.offset.top);
}
})
})
</script>
</head>
<body>
<h1>Testando a funcionalidade “draggable”</h1>
<div id=”conteiner”>
<div id=”arrasteme”>Arraste esta camada!</div>
</div>
<div id=”posicao”>
Coordenadas do elemento relativas ao conteiner:
<br>
X: <span id=”posx”></span>
<br>
Y: <span id=”posy”></span>
<br>
<br>
Coordenadas do elemento absolutas a página:
<br>
X: <span id=”offsetx”></span>
<br>
Y: <span id=”offsety”></span>
</div>
</body>
</html>
Conclusão
Certamente ainda há muitas coisas no ar sobre os elementos arrastáveis que podemos criar com jQuery UI. No entanto, aqui pudemos encontrar respostas para as dúvidas mais comuns.
Só falta recomendar dar uma olhada na documentação, onde poderemos encontrar bem mais exemplos e uma descrição completa de opções de configuração, eventos e métodos que permitem os elementos com a funcionalidade de arrastar neste framework.
Fonte: http://www.criarweb.com/artigos/elemento-draggable-jeuryui.html