Search code examples
phpjquerywordpressjquery-uidroppable

Saving jQuery UI droppable order of elements in PHP

Example of the page - https://jsfiddle.net/7b8bqzsh/

I have this working great on the front-end, I've read the jQuery UI docs that details how to save the order via ajax - but I'm looking to save the order when clicking the "Save" button within my form, storing the order along with order Wordpress settings with my form action set to "options.php".

How would this be possible?

$(".social-msl-link-label").draggable({
  connectToSortable: ".social-msl-group-list",
  revert: "invalid",
  helper: "clone"
});

$(".social-msl-links-order li").droppable({
  accept: ".social-msl-link-label",
  tolerance: 'pointer',
  greedy: true,
  hoverClass: 'highlight',
  drop: function(ev, ui) {
$(ui.draggable).clone(true).detach().css({
  position: 'relative',
  top: 'auto',
  left: 'auto'
}).appendTo(this);

$(this).siblings().filter(function() {
  return $(this).text().trim() === $(ui.draggable).text().trim();
    }).empty();
  }
 });


<form method="post" action="options.php">

    <input type="submit" class="button-primary" value="Save Changes" />

</form>
Solution

  • i think what you have to do is to simply record the order in some hidden field and than at server side process the Order...

    you can take help of How to pass sortable order to hidden field in jQuery? for storing the order into hidden field

    And In your Save action at server end you can simply use the explode function and get the order in array format or you can process it as per your Requirement.