metafizzy / packery

:bento: Gapless, draggable grid layouts
https://packery.metafizzy.co
4.13k stars 315 forks source link

Saving the order in the database #548

Open iroshiva opened 4 years ago

iroshiva commented 4 years ago

Hi everybody,

Does anybody know how to save the position of the elements after dragging in the database with ajax (in a column position) ?

With an another configuration, i used :

 $(function() {
    $("container_with_all_images").sortable({
      update: function(e, ui){
        ui.placeholder.height(ui.item.height());
        Rails.ajax({
          url: $(this).data("url"),
          type: "PATCH",
          data: $(this).sortable('serialize')
        });
      }
    }).disableSelection();

  });

Thx !

Jean

EddiesTech commented 1 year ago

This is very so you have probably found a solution, but for the purposes of others finding the issue... Currently, I have a one-column grid. When the code/the user adds an element to the items div, I give it a name and add that name as an attribute "data-backendname" and other data. Then when the user presses save, I run this function, to get the elements and shove it in a json to send to the database

function getListofItems() {
    var items = []
    window.pckry.getItemElements().forEach((element)=>{
        if (typeof element.dataset != 'undefined' && typeof element.dataset.backendname != 'undefined') {
            if(element.dataset.backendname.startsWith("customlink-")){
                items.push({"custom": true, "backendname":element.dataset.backendname, "name":element.dataset.name, "description":element.dataset.description, "url":element.dataset.url})
            }else{
        items.push({"backendname": element.dataset.backendname, "custom":false})
            }
    }
    })
    return items
}