javascript — перетащите элемент списка в новую относительную позицию и сохраните в базе данных.
Я пытаюсь создать функцию, которая позволит мне отображать набор изображений (уже сохраненных в определенном порядке в базе данных) и позволять пользователю перетаскивать каждое изображение в новом порядке относительно других с мгновенным ajax?) сохранять в фоновом режиме всякий раз, когда изображение помещается в новую позицию.
Моя идея состоит в том, чтобы настроить мою таблицу базы данных следующим образом:
имя таблицы: изображение
поля и примерные значения
[Pictureset], [picture_order]«Set1», «Pic1A.jpg | Pic1B.jpg | Pic1C.jpg»
«Set2», «Pic2C.jpg | Pic2A.jpg | Pic3B.jpg»
…и так далее.
Таким образом, если я вызываю одну запись, используя php, я могу:
$oldorder=explode("|", $row[pic_order]);
в массив, который я могу использовать для отображения (foreach ($ oldorder), отображать перетаскиваемый div в каком-либо контейнере div) для отображения изображений в их текущем порядке. Каждый раз, когда изображение помещается в новую позицию, я мог:
$neworder=implode ("|", [picture names in divs according to their new positions])
и в фоновом режиме (ajax?) сделать запись базы данных сделать:
UPDATE picturetable SET picture_order=$neworder WHERE pictureset="Set2"Я нашел несколько сценариев, которые помогли мне создать перетаскиваемые изображения, и даже сценарий, который якобы сохраняет ajax … но я не могу заставить его работать за пределами перетаскиваемой части (функция сохранения ajax на самом деле не кажется, имеет место, или если это произойдет, фотографии не будут взорваны в новом порядке.
Модель, за которой я следовал, находится здесь,
http://www.gregphoto.net/sortable/ (последний показ внизу страницы)
http://www.gregphoto.net/index.php/2007/01/16/scriptaculous-sortables-with-ajax-callback/ (подробный код … но не совсем такой, как на картинке выше)
но мне интересно, может ли кто-нибудь помочь мне раздеть javascript (или прокомментировать его) до самого близкого кода, чтобы я мог ясно понимать, что должно происходить.
Я чувствую, что я очень близок к тому, чтобы сделать это, но Javascript сбивает меня с толку: есть ли в любом случае то, что на самом деле происходит в сценарии, многословно отраженное в том, что я вижу на странице (т. Е. Вывод переменных или массивов) которые меняются или операторы $ sql, которые происходят в фоновом режиме?
Я надеюсь, что это не слишком суетливый вопрос.
Решение
Хорошо, я сделал несколько значительных изменений в сценарии, который нашел на:
http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php
и придумал следующее (требуются два файла: основной файл .php и файл updateDB.php.
Обратите внимание на структуру таблицы / содержимого базы данных, которые я описал в исходном вопросе: у меня есть одна строка записи для каждого набора изображений, первичный ключ — это идентификатор набора изображений и список имен изображений в нужном порядке. , помещается в одно текстовое поле, каждое имя изображения разделяется символом «pipe» («|»).
Эту же модель можно легко изменить, чтобы обрабатывать другие вещи, такие как цитаты, абзацы, ссылки, что угодно.
Вот первая модель файла:
<?php
$conn=mysqli_connect("localhost", "username", "password", "database_name") or die ("Could not connect:" . mysqli_error($conn));
$_POST[setID]="Set1"; //sample value
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui-1.10.2.custom.min.js"></script>
<style>
ul {
margin: 0;
}
#contentLeft {
float: left;
width: auto;
height: auto;
border: black solid 1px;
}
#contentLeft li {/* I want the pictures to look like floated tiles rather than a vertical top-bottom list. The jquery code seems to require that the items be presented as li rather than just images*/
white-space: nowrap;
float: left;
list-style: none;
margin: 0 0 4px 0;
padding: 10px;
background-color:#00CCCC;
border: #CCCCCC solid 1px;
color:#fff;
}
#contentRight {/* just a green box over on the right that shows what happened in the background after an item is moved */
float: right;
width: 260px;
padding:10px;
background-color:#336600;
color:#FFFFFF;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=updateRecordsListings&setID=<?php echo $setID;?>';
$.post("updateDB.php", order, function(theResponse){
$("#contentRight").html(theResponse);
});
}
});
});
});
</script>
</head>
<body>
<div id="contentLeft">
<ul>
<?php //go get a set of pictures from the database
$query = "SELECT * FROM picset_table where setID={$_POST[setID]}";
$result = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC))
{$currentOrder=explode("|",$row[pics_ordered]);}
foreach($currentOrder as $pic) {//cycle through picture names and present each in a li (floated)
//$picfix is needed here because MY naming convention is "setid_n.jpg", and javascript seems to break all stings on the "_" character, which messes this up
//so,after the data passes into the updateDB.php process, the "~" gets re-replaced with the "_" to construct the SQL Update string.
$picfix=str_replace("_","~",$pic); //you may not need this if you don't have underscores in your picture names.
echo "<li id=\"recordsArray_$picfix\"><img src=\"photos/$pic\" height=\"100px\" /></li>";
}
?>
</ul>
</div>
<div id="contentRight">
<p>Array will be displayed in this box when any pictures are moved.</p>
<p> </p>
</div>
</body>
</html>
и вот файл updateDB.php
<?php
$conn=mysqli_connect("localhost", "username", "password", "database_name") or die ("Could not connect:" . mysqli_error($conn));
$action = mysqli_real_escape_string($conn, $_POST['action']);
$updateRecordsArray = $_POST['recordsArray'];
if ($action == "updateRecordsListings") {
$neworder=implode("|", $updateRecordsArray);
$picUnfix=str_replace("~","_",$neworder); // puts the underscore back where it belongs
$query = "UPDATE picset_table SET pics_ordered='".$picUnfix."'
WHERE setID=$setID";
mysqli_query($conn, $query);
//echo "<b>$query</b><br />";
echo '<pre>';
print_r($updateRecordsArray); //thisappears in the green box
echo '</pre>';
}
?>
Возможно, это будет полезно кому-то еще.
Другие решения
Других решений пока нет …