Element Position Before Dragging - Droppable - jQuery

Navigation
0

I'm making a game and I need to grab the position of an element before dragging it. I'm using the Droppable function of jQuery UI.

jQuery 

$("div.cesto").off().droppable({
    accept : "span.piece",
    // Quando coloca o mouse em cima do cesto
    over : function(){
        $(this).addClass("amp");
        media.replay("boeing-02");
        media.play("boeing-02");
    },
    // Quando sai com o mouse de cima do cesto
    out : function(){
        $(this).removeClass("amp");
    },
    drop : function(event, ui){
        var cesto = $(this);

        // Posições atual do elemento
        var positionTopPiece  = ui.position.top;
        var positionLeftPiece = ui.position.left;

In the last two lines of the code, notice that I'm picking up the current position of the element. That is, I click on the element, drag and drop it and it gives me the position.

But that's not what I want. I want you to save your TOP and LEFT positions to use later in a function before dragging it.

That is, the element will return to its home position depending on a result.

I'm in the Droppable documentation - link

But I can not find a function that does what I need.

position

Type: Object

Current CSS position of the draggable helper as {top, left} object.

offset

Type: Object

Current offset position of the draggable helper as {top, left} object.

    
asked by anonymous 18.06.2015 / 15:24

1 answer

0

I was able to resolve using callback activate . 

    // Ao clicar sobre o elemento 
    activate : function(event, ui){
        positionTopPiece  = ui.draggable.css("top"); // Posição de Origem - Para caso errar, voltar
        positionLeftPiece = ui.draggable.css("left"); // Posição de Origem - Para caso errar, voltar
    },

I created two global variables. positionTopPiece and positionLeftPiece .

I take the top and left positions and then use a function to return the item to its source.

Thank you.

    
18.06.2015 / 16:24
Problem with inputmask (Mask) Draggable in jquery with multiple elements