Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jQuery Drag & Drop + PHP
Forum PHP.pl > Forum > Po stronie przeglądarki
nait
4.02.2011, 23:07:52
Witam!

W ramach edukacji robię sobie mały skrypcik do uploadu i edycji galerii, który wykorzystam do mojej stronki.
Bardzo spodobało mi się rozwiązanie drag & drop z wykorzystaniem jQuery (http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/), aczkolwiek mam problemy z dostosowaniem tego do swoich potrzeb.
Nie wiem jak zrobić aby zapisywało kolejność dopiero po wciśnięciu inputa, który sobie dodałem, zamiast dynamicznego zapisu. Kombinowałem kombinowałem ale nic mi z tego nie wyszlo ^^.. Prosiłbym o pomoc

Mój kod:
index.php 
[HTML] pobierz, plaintext 
  1. <?php require("db.php"); ?>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>jQuery Dynamic Drag'n Drop</title>
  8. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  9. <script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
  10.  
  11.  
  12.  
  13. <style>
  14. html, body {
  15.    height:100%;
  16. }
  17. body {
  18.    font-family: Arial, Helvetica, sans-serif;
  19.    font-size: 16px;
  20. }
  21. #contentLeft {
  22.    width: 1000px;
  23.    float: left;
  24.    border: 1px black solid;
  25.  
  26. }
  27. #contentLeft div{
  28.    height: 300px;
  29.    width: 300px;
  30.    float: left;
  31.    background: #ebe4d7;
  32.    border:1px green solid;
  33. }
  34. #contentLeft input {
  35.    clear: both;
  36.    float: left;
  37. }
  38. #contentLeft img{
  39.    width: 141px;
  40.    height: 127px;
  41.    border: 1px red solid;
  42.    float: left;
  43. }
  44.  
  45. #contentRight {
  46.    clear: left;
  47.    float: left;
  48.    width: 400px;
  49.    height: 650px
  50.    padding:10px;
  51.    background-color:#336600;
  52.    color:#FFFFFF;
  53. }
  54.  
  55. </style>
  56.  
  57.  
  58. <script type="text/javascript">
  59. $(document).ready(function(){                      
  60.    $(function() {
  61.       $("#contentLeft").sortable({ opacity: 0.6, cursor: 'move'
  62.  
  63.  
  64.                , update: function() {
  65.                   var order = $(this).sortable("serialize") + '&action=updated_order';
  66.                   $.post("updateDB.php", order, function(theResponse){
  67.                      $("#contentRight").html(theResponse);
  68.                   });                                              
  69.                }
  70.  
  71.  
  72.       });
  73.    });
  74. });   
  75. </script>
  76.  
  77. </head>
  78. <body>
  79.  
  80.    <div id="contentLeft">
  81.          <?php
  82.          $thumbs = "uploaded/thumbs/";
  83.          $query  = "SELECT * FROM records ORDER BY recordListingID ASC";
  84.          $result = mysql_query($query);
  85.          $col = 1;
  86.  
  87.          while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
  88.          ?>
  89.             <div id="order_array_<?php echo $row['recordID'];?>">
  90.                <img src="<?php echo $thumbs . $row['recordID'] ?>.jpg" alt="" />
  91.                <form method="post" action="updateDB.php">
  92.                   <input type="text" name="description" value="<?php echo $row['recordText'] ?>" />
  93.                </form>
  94.             </div>
  95.          <?php
  96.             }
  97.          ?>
  98.  
  99.    </div>
  100.    <form method="post" action="updateDB.php">
  101.       <input type="submit" name="send" value="ZAPISZ" />
  102.    </form>
  103.  
  104.    <div id="contentRight">
  105.      <p>Array will be displayed here.</p>
  106.      <p>&nbsp; </p>
  107.    </div>
  108.  
  109. </body>
  110. </html> 
[HTML] pobierz, plaintext


updateDB.php 
[PHP] pobierz, plaintext 
  1. <?php
  2. require("db.php");
  3.  
  4. $action             = mysql_real_escape_string($_POST['action']);
  5. $update_order    = $_POST['order_array'];
  6.  
  7. echo "<pre>";
  8. print_r($_POST);
  9. echo "</pre>";
  10.  
  11. if ($action == "updated_order"){   
  12.    $listingCounter = 1;
  13.    foreach ($update_order as $recordIDValue) {
  14.  
  15.       $query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
  16.       mysql_query($query) or die('Error, insert query failed');
  17.       $listingCounter = $listingCounter + 1;   
  18.    }
  19.  
  20.    echo '<pre>';
  21.    print_r($update_order);
  22.    echo '</pre>';
  23.    echo 'If you refresh the page, you will see that records will stay just as you modified.';
  24. }
  25. ?>
[PHP] pobierz, plaintext
Kartofelek
6.02.2011, 12:54:44
Możesz przecież np zrobić jquery each na elementach listy czy co tam masz, i za pomocą tej metody zbudować sobie array, lub string i przeslac to do skryptu.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.