@ 6502: Thk, è molto utile.
Per ulteriori informazioni, im lavorando su una luce sperimentale plug-ordinabile jQuery, che può funzionare con il posizionamento galleggiante (in alto, a sinistra, a destra, in basso)
il codice:
simply use $(..selector..).sortable({ items: ..selector.. })
-
$.fn.sortable = function(o) {
o.self = this;
o.helper = null;
$(document).bind('mouseup.sortable', function(e) {
if(o.sortable) {
o.sortable.css({ opacity: ''});
if(o.target) {
if(o.area == 's') {
o.sortable.css({ float: '' })
}
else if(o.area == 'n') {
o.sortable.css({ float: '' })
o.target.css({ float: '' })
}
else if(o.area == 'w') {
o.target.css({ float: 'left' })
o.sortable.css({ float: 'left' })
}
else if(o.area == 'e') {
o.target.css({ float: 'left' })
o.sortable.css({ float: 'left' })
}
o.target[ o.area == 's' || o.area == 'e' ? 'before':'after'](o.sortable);
o.target[0].style.setProperty('cursor', false , false);
o.target = null;
}
o.helper.remove();
o.sortable = null;
}
}).bind('mousemove.sortable', function(e) {
if(o.sortable) {
o.ex = e.clientX + $(document).scrollLeft() + 10
o.ey = e.clientY + $(document).scrollTop() - o.sortable[0]._height - 10
o.helper.css({ left: o.ex, top: o.ey });
}
});
return $(this.selector).delegate(o.items, 'mousemove.sortable', function(e) {
if(o.sortable && o.sortable[0] != this) {
var self = $(this)
var x = e.clientX + $(document).scrollLeft() - self.offset().left
var y = e.clientY + $(document).scrollTop() - self.offset().top
var w = self.width()
var h = self.height()
var ynorm = y * w/h;
o.area = (w - x) > ynorm ? (x > ynorm ? 's':'e') : (x > ynorm ? 'w':'n');
this.style.setProperty('cursor', o.area+'-resize', 'important');
o.target = self;
}
}).delegate(o.items, 'mousedown.sortable', function(e) {
o.sortable = $(this).css({ opacity: 0.4 });
this._width = o.sortable.width();
this._height = o.sortable.height();
o.helper = o.sortable.clone().css({ position: 'absolute', left: -99999, top: 0 })
$('body').append(o.helper)
return false;
});
}