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

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

＆＃13;

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());

＆＃13;

<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>

＆＃13;

JQueryUI Sortable - 字符串的新订单

1 个答案: