jQuery 벽돌과 UI 정렬 가능

내가 개발중인이 웹 사이트는 here입니다. 그것은 사진 웹 사이트이고 내 고객은 그녀가 사진을 옮겨서 나타나는 순서를 바꿀 수있는 무언가를 구현하도록 요청했습니다. 그들은 MySQL 데이터베이스에서 왔으며 jQuery Masonry로 표시됩니다.jQuery 벽돌과 UI 정렬 가능

jQuery UI Sortable을 즉시 생각해 보았고, 전혀 운이없는 상태로 구현하려고했습니다. 어떻게해야합니까? 누군가 나를 올바른 방향으로 향하게 할 수 있습니까?

미리 감사드립니다.

출처

2013-08-19 Ricardo Jerónimo

귀하의 사이트에 대한 링크를 게시해서는 안됩니다. 당신은 당신의 질문에 관련 코드를 넣어야합니다. 또한 질문에 대한 지식을 보여줄 필요가 있습니다 ... jQuery UI를 정렬 할 때 어떤 문제가 있습니까? – dezman

글쎄, 나는 요소들을 분류 할 수없고, 단지 그들을 이동시킬 뿐이다. 이 코드는 여기에있는 스크립트입니다. http://www.mrclay.org/2013/06/05/simpler-masonry-sortable-working-together/ 하지만 데이터베이스에서 주문할 수 있어야하며 아니 이데아 어떻게 :/ 지식의 부족에 대해 사과드립니다 ... –

당신은 포장재 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이다. 시작입니다.

그러나 이것은 "presto"해결책이 아닙니다.이 예제는 이전 버전의 masonry에서 작동합니다. 최신 버전에는 "reload"메소드가 layout() 및 reloadItems()로 대체 되었기 때문에 몇 가지 버그가 있습니다. 아니면 오래된 벽돌 버전을 사용할 수 있습니다.

jQuery.Shapeshift()을 사용하면 기본적으로 원하는 것을 수행 할 수 있습니다.

출처

2013-10-16 22:36:07 Ryoku

이것은 나를 위해 충분하지 않았습니다. "$ container.masonry()"또는 "msnry.layout()"내 경우에는 "reloadItems"호출 후보기를 새로 고치기 후 추가 할했습니다. – Sander

샌더가 말한 것과 똑같습니다. ui.item.parent(). masonry ('reloadItems'); 그 자체로는 나에게 아무런 도움이되지 않습니다. – stef

답변

관련 문제