Javascript 将列表项拖动到新的相对位置并保存到数据库
我正在尝试构建一个函数,该函数允许我显示一组图片(已经以特定顺序保存在数据库中),并允许用户将每个图片拖动到一个新的顺序中,相对于其他图片,每当图片被放置到一个新位置时,立即(ajax?)在后台保存 我的想法是这样设置我的数据库表: 表名:可画 字段和样本值 [图片集],[图片顺序] “Set1”、“Pic1A.jpg | Pic1B.jpg | Pic1C.jpg” “Set2”,“Pic2C.jpg | Pic2A.jpg | Pic3B.jpg” ……等等 这样,如果我调用一条记录,使用php我可以:Javascript 将列表项拖动到新的相对位置并保存到数据库,javascript,php,ajax,drag-and-drop,background-process,Javascript,Php,Ajax,Drag And Drop,Background Process,我正在尝试构建一个函数,该函数允许我显示一组图片(已经以特定顺序保存在数据库中),并允许用户将每个图片拖动到一个新的顺序中,相对于其他图片,每当图片被放置到一个新位置时,立即(ajax?)在后台保存 我的想法是这样设置我的数据库表: 表名:可画 字段和样本值 [图片集],[图片顺序] “Set1”、“Pic1A.jpg | Pic1B.jpg | Pic1C.jpg” “Set2”,“Pic2C.jpg | Pic2A.jpg | Pic3B.jpg” ……等等 这样,如果我调用一条记录,使用p
$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保存的事情实际上似乎没有发生,或者如果发生了,图片就不会内爆成新的顺序)
我所遵循的模型就在这里
(最后显示在页面底部)
(详细代码…但与上面的图片不完全相同)
但我想知道是否有人能帮我把javascript(或对它的评论)剥离到最简单的代码,这样我就可以清楚地知道应该发生什么
我觉得我已经非常接近能够做到这一点了,但是Javascript让我感到困惑:是否有必要让脚本中实际发生的事情在我在页面上看到的内容中详细地反映出来(即,回显正在更改的变量或数组,或在后台发生的$sql语句)
我希望这不是一个太繁琐的问题。好的,我对我在以下网站找到的脚本做了一些重大修改: 并提出了以下内容(需要两个文件,main.php文件和updateDB.php文件) 请注意我在原始问题中描述的数据库表/内容的结构:对于每组图片,我有一个记录行,主键是图片集的ID,图片名称列表按所需顺序放置在单个文本字段中,每个图片名称用“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>
jQuery动态拖放
保险商实验室{
保证金:0;
}
#内容左{
浮动:左;
宽度:自动;
高度:自动;
边框:黑色实心1px;
}
#contentLeft li{/*我希望图片看起来像浮动的平铺,而不是垂直的上下列表。jquery代码似乎要求项目显示为li,而不仅仅是图像*/
空白:nowrap;
浮动:左;
列表样式:无;
利润率:0.4px 0;
填充:10px;
背景色:#00CCCC;
边框:#中交固体1px;
颜色:#fff;
}
#contentRight{/*只是右边的一个绿色框,显示移动项目后背景中发生的情况*/
浮动:对;
宽度:260px;
填充:10px;
背景色:#336600;
颜色:#FFFFFF;
}
$(文档).ready(函数(){
$(函数(){
$(“#contentLeft ul”).sortable({opacity:0.6,光标:'move',update:function(){
var order=$(this).sortable(“serialize”)+'&action=updateRecordsListings&setID=';
$.post(“updateDB.php”),顺序,函数(响应){
$(“#contentRight”).html(响应);
});
}
});
});
});
谢谢Jay。这看起来确实好一点。我发现了一个我(经过一点尝试和错误)可以修改的脚本,它似乎工作得很好,但它使用- 元素,而不仅仅是img或div标记。我将不得不看看我是否可以再多用一点,但它的基本功能完全符合我的需要,只需要很少的代码。[链接]
<?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>';
}
?>