Question

我有许多图片集（> 1000张），每张9张图片组成。我想使用一个脚本，使我可以将这些1-9张图片拖放到新位置。

因此，我发现jQuery Gridly插件很有用，但这是挑战。如何返回文件（图片）的新位置，以便可以将其存储到数据库中？因此，首先，我查看文件，对其重新排序，然后按下“处理”按钮以检索新的（顺序）位置。

这是我到目前为止发现的：

<!DOCTYPE html>
<html>
<head>
  <link href="include/gridly_renameandorder.css" rel="stylesheet" type="text/css">
  <link href="include/jquery.gridly.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://yourjavascript.com/8990245721/jquery-gridly.js" type="text/javascript"></script>
</head>
<body>
  <?php $thisdir = 'Pictureset1'; //target the directory where the pictures reside. ?>
  <div class="picture"><img src="<?php echo $thisdir.'/1.jpg'; ?>"></div>
  <div class="picture"><img src="<?php echo $thisdir.'/2.jpg'; ?>"></div>
  <div class="picture"><img src="<?php echo $thisdir.'/3.jpg'; ?>"></div>
  <div class="picture"><img src="<?php echo $thisdir.'/4.jpg'; ?>"></div>
  <div class="picture"><img src="<?php echo $thisdir.'/5.jpg'; ?>"></div>
  <div class="picture"><img src="<?php echo $thisdir.'/6.jpg'; ?>"></div>
  <div class="picture"><img src="<?php echo $thisdir.'/7.jpg'; ?>"></div>
  <div class="picture"><img src="<?php echo $thisdir.'/8.jpg'; ?>"></div>
  <div class="picture"><img src="<?php echo $thisdir.'/9.jpg'; ?>"></div>
  </div>
  <!-- by pressing the 'process button' i want to retrieve the new location of the file.   -->
  <button type="button">Process</button>
  <script>
    var reordering = function($elements) {
      // Called before the drag and drop starts with the elements in their starting position.	
      $elements.each(function() {
        console.debug($(this).data('position'));
      });
    };
    var reordered = function($elements) {
      // Called after the drag and drop ends with the elements in their ending position.
      $elements.each(function() {
        console.debug($(this).data('position'));
      });
    };
    $('.gridly').gridly({
      base: 60, // px   base: The number of pixels for a single column span.
      gutter: 20, // px - gutter: The number of pixels between columns.
      columns: 12 // columns: The total number of columns allowed across.
    });
  </script>
</body>
</html>

在jQuery-Gridly网站上：我找到了代码以检索重新排序的信息，该信息已放入脚本括号之间的HTML文件中：

var reordered = function($elements) {
  // Called after the drag and drop ends with the elements in their ending position.
  $elements.each(function() {
    console.debug($(this).data('position'));
  });
};

与朋友一起学习时，我了解到我需要使用AJAX调用来获取重新排序的信息，并将其提交给目标脚本：

$.ajax({
  'url': 'targetscript.php',
  'data': elementData, // the data to sent
  'method': 'POST',
  'dataType': 'json',
  'success': function(data) {
    if (data.success) {
      alert('whee!');
    } else {
      alert('boo!');
    }
  }
});

这应该是（草稿）目标脚本：

<?php
$success = false;

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // read the $post
    // check if everything is provided 
    // ...
    $success = true;
}

header('Content-Type: application/json; charset=UTF-8');
echo json_encode(array(
    'success' => $success,
));
?>

我的问题是：如何使所有这些正常工作？

jQuery Gridly回调已重新排序

0 个答案: