Jquery - Собственная функция стека jquery ui - PullRequest
2 голосов
/ 14 августа 2011

Я пытаюсь исключить функцию стека jquery ui

Код JS

 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;

 }

Я получаю ошибку group[0].style is undefined.Div с селектором ".myStack" существует.Надеюсь, кто-нибудь может мне помочь.

Заранее спасибо!Петр

РЕДАКТИРОВАТЬ: JQuery UI код

$.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;

    }
});

РЕДАКТИРОВАНИЕ: 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+'');

 }

1 Ответ

1 голос
/ 14 августа 2011

$. MakeArray () не делает то, что вы думаете, он делает: он превращает подобные объектам массивы в «реальные» массивы, но не разрешает селекторы. get () или toArray () вместо:

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...