Jquery - Own jquery ui stack function
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!
PeterEDIT: jquery ui code
$.ui.plugin.add("draggable", "stack", {
star开发者_运维问答t: 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+'');
}
$.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;
}
精彩评论