Jump to content

Drag and Drop


Baia
 Share

Recommended Posts

A ideia é arrastar e colocar objectos numa DIV

neste momento clico num botão e os objectos são colocados na Div, onde depois os arrasto e coloco na disposição que quero, como na imagem abaixo

jny_SYe.jpg

A ideia é ter os objectos ao lado e ir arrastando os que quero para o lado as vezes que quiser como na figura abaixo

SCQLTS.jpg

Alguém me consegue dar algumas luzes ou indicar um artigo que trate deste tipo de situação, ou seja, arrastar de um lado para o outro as vezes que sejam necessárias?

Obrigado

Link to comment
Share on other sites

Criei-te aqui uma brincadeira. http://jsfiddle.net/772wrnnL/

Pontos fulcrais do código:

1) É criada uma função para que, sempre que seja adicionado um objecto ao container, o possas mover.

$.fn.isDraggie = function(){
this.draggable({containment: $("#container")});
}

2) A condição de verificação se tem ou não a classe dropped precavê que possas criar novos objectos a partir dos objectos dentro do container.

if($clone.hasClass("dropped") == false){

}

3) O index do objecto que é arrastado é sobreposto ao container bem como é criado apenas e só um clone desse mesmo objecto de forma a não eliminar o original.

revert: "invalid", // Previne que arrastes o objecto para fora do container
helper: 'clone',
zIndex: 100,

Por este conjunto de código, tens uma base por onde te guiares.

  • Vote 1
Link to comment
Share on other sites

Procuraste no google antes de me perguntar?

Antes de mais as documentações que irás precisar daqui para a frente de forma a colocares tudo a funcionar como pretendes são as seguintes:

Draggable Documentation

Droppable Documentation

Resizable Documentation

Se queres que apareça sempre em primeiro lugar, só tens de trocar o trecho de código $(this).append($clone); para $(this).prepend($clone);.

Desta forma quando arrastas o objecto este é colocado em primeiro lugar (independentemente da quantidade de objectos que já tenhas no container).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.