Question

I did some searching and couldn’t find an answer to this, plus did some messing around with the code to no avail. I have a standard jQuery UI draggable and droppable setup which works.

However when items (in this case shoes) are dragged into the droppable target area, they appear to be appended, so old items stay at the front and new items get added on the end and pushed out of view.

Is there a way of having the sortable items prepend to my target droppable as opposed to being appended?

Edit **

var proto = $.ui.droppable.prototype;

proto._create = function() {

    console.log('Calling the create method');

    var o = this.options, accept = o.accept;
    this.isover = 0; this.isout = 1;

    this.accept = $.isFunction(accept) ? accept : function(d) {
    return d.is(accept);
    };

    //Store the droppable's proportions
    this.proportions = { width: this.element[0].offsetWidth, height: this.element[0].offsetHeight };

    // Add the reference and positions to the manager
    $.ui.ddmanager.droppables[o.scope] = $.ui.ddmanager.droppables[o.scope] || [];
    $.ui.ddmanager.droppables[o.scope].unshift(this);

    (o.addClasses && this.element.addClass("ui-droppable"));
};

Answer 1

Yes, though it’s pretty complicated. You’ll need to extend the JQueryUI ui.droppable object modifying the _create function. Currently it uses push to add your new item to the end of the array, like so:

$.ui.ddmanager.droppables[o.scope].push(this);

You’ll want to use unshift:

$.ui.ddmanager.droppables[o.scope].unshift(this);

JQuery droppable source:
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.droppable.js

JavaScript unshift() documentation:http://www.w3schools.com/jsref/jsref_unshift.asp

Tutorial for extending JQueryUI widgets: http://bililite.com/blog/extending-jquery-ui-widgets/