首页 > 数据库> 文章详细

javascript-将列表项拖动到新的相对位置并保存到数据库

2019-10-29 04:30:54 阅读：170 来源： 互联网

标签：ajax drag-and-drop background-process javascript php

我正在尝试构建一个函数,该函数将允许我显示一组图片(已按特定顺序保存在数据库中),并允许用户即时将每个图片拖到相对于其他图片的新订单中( ajax？)每当图片放到新位置时都保存在背景中.

我的想法是像这样设置数据库表：

表名：picturetable

字段和样本值

[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文件.

请注意我在原始问题中描述的数据库表/内容的结构：每个图片集都有一个记录行,主键是图片集的ID和图片名称列表(按所需顺序)放在单个文本字段中,每个图片名称用“竖线”(“ |”)字符分隔.

可以很容易地修改同一模型,以处理引号,段落,链接等其他内容.

这是第一个文件模型：

<?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>&nbsp; </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>';
}
?>

也许这对其他人有用.

标签：ajax,drag-and-drop,background-process,javascript,php
来源： https://codeday.me/bug/20191029/1957563.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-将列表项拖动到新的相对位置并保存到数据库