JQueryUI Sortable - 字符串的新顺序

Question

我正在使用 JQueryUi Sortable 通过用户友好的拖放功能对图库进行排序。

排序的东西看起来像：

 <div id="gallery"><div class="wrapper" data-id="//here is name of picture like :2017554352.jpg">
      //actual picture and desc.. etc.
  </div>
  <div class="wrapper" data-id="//here is name of picture like :2017554352.jpg">
      //actual picture and desc.. etc.
  </div><div>

这里是实际的简单排序脚本：

<script> 
       $( function() {
       $( "#gallery" ).sortable();

       });
</script>

我想通过将 div 的 data-id 输入到此表单的隐藏输入中来创建 php 字符串。 将如何运作这看起来像什么？

<form name="sortForm" action="sortPics_submit.php" method="post">
         <input type="hidden" id="sortOrder" name="sortOrder">
        <button type="submit" class="submit3" name="submit"><span>Save&Continue...</span></button>
</form>

感谢您的任何建议！

Answer 1

您可以使用以下函数以逗号分隔格式连接所有可排序 div 的data-id，然后将其添加到表单输入中。 看下面的演示

function getData() {
  var string = '';
  $("#gallery>div[data-id]").each(function() {
    string += $(this).data('id') + ',';
  });
  return string.substr(0, string.length - 1);
}
$("#sortOrder").val(getData());
console.log(getData());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="gallery">
  <div class="wrapper" data-id="2017554352.jpg">

  </div>
  <div class="wrapper" data-id="2017550052.jpg">

  </div>
</div>

<form name="sortForm" action="sortPics_submit.php" method="post">
  <input type="text" id="sortOrder" name="sortOrder">
  <button type="submit" class="submit3" name="submit"><span>Save&Continue...</span></button>
</form>