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
<?php require("db.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
html, body {
height:100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
#contentLeft {
width: 1000px;
float: left;
border: 1px black solid;
}
#contentLeft div{
height: 300px;
width: 300px;
float: left;
background: #ebe4d7;
border:1px green solid;
}
#contentLeft input {
clear: both;
float: left;
}
#contentLeft img{
width: 141px;
height: 127px;
border: 1px red solid;
float: left;
}
#contentRight {
clear: left;
float: left;
width: 400px;
height: 650px
padding:10px;
background-color:#336600;
color:#FFFFFF;
}
<script type="text/javascript"> $(document).ready(function(){
$(function() {
$("#contentLeft").sortable({ opacity: 0.6, cursor: 'move'
, update: function() {
var order = $(this).sortable("serialize") + '&action=updated_order';
$.post("updateDB.php", order, function(theResponse){
$("#contentRight").html(theResponse);
});
}
});
});
});
<?php
$thumbs = "uploaded/thumbs/";
$query = "SELECT * FROM records ORDER BY recordListingID ASC";
$result = mysql_query($query);
$col = 1;
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<div id="order_array_<?php echo $row['recordID'];?>">
<img src="<?php echo $thumbs . $row['recordID'] ?>.jpg" alt="" />
<form method="post" action="updateDB.php"> <input type="text" name="description" value="<?php echo $row['recordText'] ?>" />
<?php
}
?>
<form method="post" action="updateDB.php"> <input type="submit" name="send" value="ZAPISZ" />
<p>Array will be displayed here.
</p>
updateDB.php
<?php
require("db.php");
$update_order = $_POST['order_array'];
if ($action == "updated_order"){
$listingCounter = 1;
foreach ($update_order as $recordIDValue) {
$query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
$listingCounter = $listingCounter + 1;
}
echo 'If you refresh the page, you will see that records will stay just as you modified.'; }
?>