Переместите элемент списка в верхнюю часть незаказанного списка с помощью jQuery
Это добьется цели:
<fo:table>
<fo:table-column />
<fo:table-column />
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block>LEFT TEXT</fo:block>
</fo:table-cell>
<fo:table-cell>
<fo:block text-align="right">RIGHT TEXT</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
2 ответа
Я нашел решение, которое, кажется, работает очень хорошо. Это доказательство концепции, поэтому вам, вероятно, придется немного изменить ее, чтобы она лучше работала в вашем конкретном случае. Кроме того, я тестировал его только в Firefox, но я не вижу причин, по которым это не работает во всех браузерах. Во всяком случае, вот оно:
<script type="text/javascript">
$(document).ready(function() {
$('li').click(function() {
// the clicked LI
var clicked = $(this);
// all the LIs above the clicked one
var previousAll = clicked.prevAll();
// only proceed if it's not already on top (no previous siblings)
if(previousAll.length > 0) {
// top LI
var top = $(previousAll[previousAll.length - 1]);
// immediately previous LI
var previous = $(previousAll[0]);
// how far up do we need to move the clicked LI?
var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');
// how far down do we need to move the previous siblings?
var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());
// let's move stuff
clicked.css('position', 'relative');
previousAll.css('position', 'relative');
clicked.animate({'top': -moveUp});
previousAll.animate({'top': moveDown}, {complete: function() {
// rearrange the DOM and restore positioning when we're done moving
clicked.parent().prepend(clicked);
clicked.css({'position': 'static', 'top': 0});
previousAll.css({'position': 'static', 'top': 0});
}});
}
});
});
</script>
<ul>
<li><a>Hank</a></li>
<li><a>Alice</a></li>
<li><a>Tom</a></li>
<li><a>Ashlee</a></li>
</ul>
Он вычисляет разницу в смещениях между щелчком LI и первым LI и перемещает щелкнувший элемент вверх, устанавливая его положение От до относительного и анимация свойства top . Точно так же он вычисляет, сколько места осталось после щелчка LI , и соответственно перемещает все предыдущие вниз. Когда закончим с анимацией,
Assuming:
<ul id="list">
<li><a>Hank</a></li>
<li><a>Alice</a></li>
<li><a>Tom</a></li>
<li><a>Ashlee</a></li>
</ul>
then:
$("#list a").click(function() {
$(this).parent().before("#list a:first");
return false;
});
If you want to animate then it's a little harder. One option:
$("#list a").click(function() {
$(this).parent().slideUp(500).before("#list a:first").slideDown(500);
return false;
});
Another option:
$("#list a").click(function() {
var item = $(this).parent();
var prev = item.prev();
while (prev.length > 0) {
item.before(prev);
prev = item.prev();
}
return false;
});
but I doubt you'll get smooth animation that way.