Question

I try to exclude the jquery ui stack function

JS Code

 stack('myStack');

 function stack(selector)
 {
    var group = $.makeArray(selector).sort(function(a,b) {
            return (parseInt($(a).css("zIndex"),10) || 0) - (parseInt($(b).css("zIndex"),10) || 0);
    });
    if (!group.length) { return; }

    var min = parseInt(group[0].style.zIndex) || 0;
    $(group).each(function(i) {
            this.style.zIndex = min + i;
    });

    this[0].style.zIndex = min + group.length;

 }

i get the error group[0].style is undefined. The div’s with the selector ".myStack" exists.
Hope someone can help me.

Thanks in advance!
Peter

---

EDIT: jquery ui code

$.ui.plugin.add("draggable", "stack", {
    start: function(event, ui) {

        var o = $(this).data("draggable").options;

        var group = $.makeArray($(o.stack)).sort(function(a,b) {
            return (parseInt($(a).css("zIndex"),10) || 0) - (parseInt($(b).css("zIndex"),10) || 0);
        });
        if (!group.length) { return; }

        var min = parseInt(group[0].style.zIndex) || 0;
        $(group).each(function(i) {
            this.style.zIndex = min + i;
        });

        this[0].style.zIndex = min + group.length;

    }
});

---

EDIT: http://jsfiddle.net/ugfFU/4/

HTML

<div style="background-color:#ff0000;" class="dragStack test"></div>
<div style="background-color:#00aa00;" class="dragStack test"></div>
<div style="background-color:#ff00aa;" class="dragStack test"></div>
<div style="background-color:#0000aa;" class="dragStack test"></div>

JS

$(document).ready(function() {


$(".test").draggable({
        addClasses: false,
        start: function(event, ui) {  },
        stop:  function(event, ui) {  }
    })
    .mouseup(function(data, handler)
    {
       stacker(this,'.dragStack');
    });
 });


 function stacker(thisA,selector)
 {
    var group = $(selector).get().sort(function(a, b) {
        return ((parseInt(a.style.zIndex), 10) || 0)-((parseInt(b.style.zIndex), 10) || 0);
    });

    if (!group.length) {
         return;
    }

    var min = parseInt(group[0].style.zIndex) || 0;
    $.each(group, function(i) {
        this.style.zIndex = min + i;
        $(this).css('z-index',''+this.style.zIndex+'');
    });

    $(thisA).css('z-index',''+min + group.length+'');

 }

Answer 1

$.makeArray() does not do what you think it does: it turns array-like objects into “real” arrays, but doesn’t resolve selectors.

Try using get() or toArray() instead:

function stack(selector)
{
    var group = $(selector).get().sort(function(a, b) {
        return (parseInt(a.style.zIndex), 10) || 0)
             - (parseInt(b.style.zIndex), 10) || 0);
    });

    if (!group.length) {
        return;
    }

    var min = parseInt(group[0].style.zIndex) || 0;
    $.each(group, function(i) {
        this.style.zIndex = min + i;
    });

    // Not sure about the line below, depends on the context the function
    // is called in.
    this.style.zIndex = min + group.length;
}