Немного опоздал на вечеринку, но я был полон решимости использовать решение с jQuery, так как в этом вопросе было очень мало помощи, особенно в том, что касается репликации функций, существующих в веб-приложениях, таких как Facebook, и перетаскивании изображений их альбомов. изменить порядок, и красивые анимации, которые сопровождают это ...
Итак, я нашел решение, которое, кажется, работает довольно хорошо, и я сделаю все возможное, чтобы объяснить его в меру своих способностей! Здесь идет ...
Самая большая проблема здесь заключалась в том, чтобы не только анимировать сортируемые элементы, но и выяснить, где их нужно анимировать - фантастика, когда речь идет о плавающих элементах, таких как изображения в галерее! Чтобы обойти это, я решил .clone() исходные плавающие LI предметы, расположить клонов абсолютно под исходных LI предметов, используя значение z-index, которое было меньше, чем исходное LI элементов, а затем, когда событие change сработало из сортируемой jQuery, я мог обнаружить положение оригинала LI и анимировать абсолютно позиционированные клоны в эти позиции. Остальное было просто показать / скрыть элементы соответствующим образом, чтобы получить желаемый эффект.
Вот код, начинающийся с HTML:
<ul id="original_items">
<li><img src="something.jpg" /></li>
<li><img src="something.jpg" /></li>
<li><img src="something.jpg" /></li>
</ul>
<ul id="cloned_items">
</ul>
Итак, у нас есть оригинальные элементы, которые мы пытаемся отсортировать, и контейнер для клонированных элементов. Время для CSS:
#original_items, #cloned_items {
list-style: none;
}
#original_items li {
float: left;
position: relative;
z-index: 5;
}
#cloned_items li {
position: absolute;
z-index: 1;
}
С помощью нашего CSS мы просто удаляем любой стиль списка, плаваем наши оригинальные элементы и устанавливаем требования z-index, чтобы клонированные элементы находились под исходными элементами. Обратите внимание на положение relative на исходных элементах, чтобы убедиться, что они ведут себя как положено. Почему под тобой спросить? Это (надеюсь) станет ясным с некоторыми Javascript:
jQuery(function(){
// loop through the original items...
jQuery("#original_items li").each(function(){
// clone the original items to make their
// absolute-positioned counterparts...
var item = jQuery(this);
var item_clone = item.clone();
// 'store' the clone for later use...
item.data("clone", item_clone);
// set the initial position of the clone
var position = item.position();
item_clone.css("left", position.left);
item_clone.css("top", position.top);
// append the clone...
jQuery("#cloned_items").append(item_clone);
});
// create our sortable as usual...
// with some event handler extras...
jQuery("#original_items").sortable({
// on sorting start, hide the original items...
// only adjust the visibility, we still need
// their float positions..!
start: function(e, ui){
// loop through the items, except the one we're
// currently dragging, and hide it...
ui.helper.addClass("exclude-me");
jQuery("#original_items li:not(.exclude-me)")
.css("visibility", "hidden");
// get the clone that's under it and hide it...
ui.helper.data("clone").hide();
},
stop: function(e, ui){
// get the item we were just dragging, and
// its clone, and adjust accordingly...
jQuery("#original_items li.exclude-me").each(function(){
var item = jQuery(this);
var clone = item.data("clone");
var position = item.position();
// move the clone under the item we've just dropped...
clone.css("left", position.left);
clone.css("top", position.top);
clone.show();
// remove unnecessary class...
item.removeClass("exclude-me");
});
// make sure all our original items are visible again...
jQuery("#original_items li").css("visibility", "visible");
},
// here's where the magic happens...
change: function(e, ui){
// get all invisible items that are also not placeholders
// and process them when ordering changes...
jQuery("#original_items li:not(.exclude-me, .ui-sortable-placeholder)").each(function(){
var item = jQuery(this);
var clone = item.data("clone");
// stop current clone animations...
clone.stop(true, false);
// get the invisible item, which has snapped to a new
// location, get its position, and animate the visible
// clone to it...
var position = item.position();
clone.animate({
left: position.left,
top:position.top}, 500);
});
}
});
});
Ух ты, я действительно надеюсь, что это имеет смысл и помогает кому-то оживить свои сортируемые списки, но это рабочий пример для всех, кто заинтересован! :)