jQuery evento ui.draggable / stato su Revert

Question

C'è un modo per ottenere informazioni se un elemento che è trascinabile è ritornato?

Sono bloccato su questo. Voglio fare un elemento droppable di nuovo, ma solo se il trascinabile che giaceva lì viene spostato altrove (significato non ritorna).

Answer 1

non sembra jQuery UI ha il supporto per esso in modo si potrebbe aggiungere voi stessi in questo modo:

$.ui.draggable.prototype._mouseStop = function(event) {
    //If we are using droppables, inform the manager about the drop
    var dropped = false;
    if ($.ui.ddmanager && !this.options.dropBehaviour)
        dropped = $.ui.ddmanager.drop(this, event);

    //if a drop comes from outside (a sortable)
    if(this.dropped) {
        dropped = this.dropped;
        this.dropped = false;
    }

    if((this.options.revert == "invalid" && !dropped) || (this.options.revert == "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) {
        var self = this;
        self._trigger("reverting", event);
        $(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {
            event.reverted = true;
            self._trigger("stop", event);
            self._clear();
        });
    } else {
        this._trigger("stop", event);
        this._clear();
    }

    return false;
}

ti permettono di fare questo:

$(document).ready(function($) {
    $('#draggable').draggable({
        revert: true,
        reverting: function() {
            console.log('reverted');
        },
        stop: function(event) {
            if (event.reverted) {
                console.log('reverted');
            }
        }
    });
});

Answer 2

ho scoperto che ci via per ottenere informazioni su se un oggetto è tornato o no. E 'costruito in jQuery ma non così ben documentato a quanto pare.

Essenzialmente è fatto tramite utilizzando una funzione callback per l'opzione revert di un oggetto trascinabile.

Qualcosa di simile a quanto segue:

$(".myselector").draggable(
{
  revert: function(droppableObj)
  {
     //if false then no socket object drop occurred.
     if(droppableObj === false)
     {
        //revert the .myselector object by returning true
        return true;
     }
     else
     {
        //droppableObj was returned,
        //we can perform additional checks here if we like
        //alert(droppableObj.attr('id')); would work fine

        //return false so that the .myselector object does not revert
        return false;
     }
  }
});

http: // www .agilepro.com / blog / 2009 / 12 / while-questo-funzionalità-è-built-into.html per ulteriori dettagli.

Answer 3

Ampliando soluzione @ di mbeedub, ecco la mia soluzione. Nel mio caso, ho bisogno del valore di ui.position su stop. Se la resistenza è ritornato, poi ho bisogno di restituire l'oggetto alla sua posizione originale. Purtroppo, jQuery UI non aggiorna la proprietà position dopo l'animazione revert viene eseguito. Fortunatamente, c'è una proprietà originalPosition. Quindi, fintanto che posso rilevare stato di conversione (in questo caso, tramite nomeclasse), sto bene!

function updatePosition (position) {
  /* Posting position to server */
}

element.draggable({

  drag: function (event, ui) {
    updatePosition(ui.position);
  },

  revert: function (droppable) {
    return !droppable && element.addClass('ui-draggable-reverted');
  },

  stop: function (event, ui) {
    if (element.is('.ui-draggable-reverted')) {
      updatePosition(ui.originalPosition);
      element.removeClass('ui-draggable-reverted');
    } else {
      updatePosition(ui.position);
    }
  }
});