jQuery Каменная кладка и пользовательский интерфейс Сортировка

Существует этот сайт, который я разрабатываю, который можно найти here. Это веб-сайт для фотографии, и мой клиент попросил меня реализовать что-то, что позволило бы ей перемещать фотографии и изменять порядок их появления. Они поступают из базы данных MySQL и отображаются с помощью jQuery Masonry.jQuery Каменная кладка и пользовательский интерфейс Сортировка

Я сразу же подумал о jQuery UI Sortable, и я пытался реализовать его совершенно без везения. Как я могу это достичь? Может кто-нибудь указать мне в правильном направлении, пожалуйста?

Заранее благодарен!

источник

2013-08-19 Ricardo Jerónimo

Вам не следует размещать ссылки на ваш сайт. Вы должны поместить соответствующий код в свой вопрос. Кроме того, вам нужно продемонстрировать знание заданного вопроса ... какая у вас проблема с пользовательским интерфейсом jQuery? – dezman

Ну, я не могу разобраться в элементах, только перемещаю их. Код - это сценарий здесь: http://www.mrclay.org/2013/06/05/simpler-masonry-sortable-working-together/ Но я также должен иметь возможность заказать их в базе данных, и у меня есть no ideia how:/ Приносим извинения за недостаток знаний ... –

Возможно, вы захотите посмотреть на упаковку http://packery.metafizzy.co. Это, в основном, кладка с сортируемым встроенным. –

Я борюсь с той же проблемой, до сих пор я отвечал, что нужно менять классы с помощью сортировки, остановки, изменения и сортировки событий jquery. Как так:

$('#sortable').sortable({  
     start: function(event, ui) {    
       console.log(ui); 
      ui.item.removeClass('masonry'); 
      ui.item.parent().masonry('reloadItems') 
       }, 
     change: function(event, ui) { 
      ui.item.parent().masonry('reloadItems'); 
       }, 
     stop: function(event, ui) { 
      ui.item.addClass('masonry'); 
      ui.item.parent().masonry('reloadItems'); 
});

Вот это working example и JS Fiddle по этому вопросу. Это начало.

Однако это не «престо» решение, в этом примере работают более старые версии кладки, в последней версии есть несколько ошибок, реализующих его, поскольку метод «перезагрузки» был заменен layout() и reloadItems(). Или ... вы можете использовать старые версии каменной кладки, если это сработает для вас.

Альтернативно вы можете использовать jQuery.Shapeshift(), что в основном делает то, что вы ищете.

источник

2013-10-16 22:36:07 Ryoku

Этого было недостаточно для меня. Мне пришлось добавить «$ container.masonry()» или «msnry.layout()» в моем случае после вызова «reloadItems» для обновления представления. – Sander

То же самое для меня, как сказал Сандер. ui.item.parent() кладка ('reloadItems'). Сам по себе ничего не делает для меня. – stef

jQuery Каменная кладка и пользовательский интерфейс Сортировка

ответ

Смежные вопросы