jjzjj

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

coder 2024-05-03 原文

我正在尝试构建一个功能,允许我显示一组图片(已按特定顺序保存在数据库中),并允许用户将每张图片拖到新的顺序中,相对于其他图片,每当将图片放入新位置时,即时(ajax?)保存在后台。

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

表名:图片表

字段和示例值

[图片集],[图片顺序]

"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 让我感到困惑:无论如何,脚本中实际发生的事情是否会详细反射(reflect)在我在页面上看到的内容中(即回显正在改变的变量或数组或正在后台发生的 $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>';
}
?>

也许这对其他人有用。

关于javascript - 将列表项拖到新的相对位置并保存到数据库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26001194/

有关javascript - 将列表项拖到新的相对位置并保存到数据库的更多相关文章

  1. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  2. ruby - RVM 使用列表[0] - 2

    是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候,我们都会看到一个可能包含5个或更多ruby的列表,我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

  3. ruby-on-rails - 如何在发布新的 Ruby 或 Rails 版本时收到通知? - 2

    有人知道在发布新版本的Ruby和Rails时收到电子邮件的方法吗?他们有邮件列表,RubyonRails有一个推特,但我不想听到那些随之而来的喧嚣,我只想知道什么时候发布新版本,尤其是那些有安全修复的版本。 最佳答案 从therailsblog获取提要.http://weblog.rubyonrails.org/feed/atom.xml 关于ruby-on-rails-如何在发布新的Ruby或Rails版本时收到通知?,我们在StackOverflow上找到一个类似的问题:

  4. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​,到目前为止一切都已安装,但是当我尝试使用rakedb:create创建数据库时,我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  5. ruby - Rails -- :id attribute? 所需的数据库索引 - 2

    因此,当我遵循MichaelHartl的RubyonRails教程时,我注意到在用户表中,我们为:email属性添加了一个唯一索引,以提高find的效率方法,因此它不会逐行搜索。到目前为止,我们一直在根据情况使用find_by_email和find_by_id进行搜索。然而,我们从未为:id属性设置索引。:id是否自动索引,因为它在默认情况下是唯一的并且本质上是顺序的?或者情况并非如此,我应该为:id搜索添加索引吗? 最佳答案 大多数数据库(包括sqlite,这是RoR中的默认数据库)会自动索引主键,对于RailsMigration

  6. ruby-on-rails - 如何让 datamapper 与 postgresql 数据库一起工作? - 2

    我已经找到了几个使用datamapper的示例,并且能够让它们正常工作。不过,所有这些示例都是针对sqlite数据库的。我正在尝试将数据映射器与postgresql一起使用。我将datamapper中的调用从sqlite3更改为postgres,并且我已经安装了dm-postgres-adapter。但它仍然不起作用。我还需要做什么? 最佳答案 与SQLite不同,PostgreSQL不将数据库存储在单个文件中。在你拥有createdyourdatabase之后,尝试这样的事情:DataMapper.setup:default,{:

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言,一个比另一个好吗?还有更好的方法吗? 最佳答案 总结:Array#include?包含String元素,在接受和拒绝输入时均胜出,对于您的示例只有三个可接受的值。对于要检查的更大的集合,看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  9. ruby - 需要重构为新的 Ruby 1.9 哈希语法 - 2

    这个问题在这里已经有了答案:HashsyntaxinRuby[duplicate](1个回答)关闭5年前。我有一个Recipe,其中包含以下未通过lint测试的代码:service'apache'dosupports:status=>true,:restart=>true,:reload=>trueend失败并出现错误:UsethenewRuby1.9hashsyntax.supports:status=>true,:restart=>true,:reload=>true不确定新语法是什么样的...有人可以帮忙吗?

  10. ruby-on-rails - rails 多态关联(遗留数据库) - 2

    我使用的是遗留数据库,所以我无法控制数据模型。他们使用了很多多态链接/连接表,就像这样createtableperson(per_ident,name,...)createtableperson_links(per_ident,obj_name,obj_r_ident)createtablereport(rep_ident,name,...)其中obj_name是表名,obj_r_ident是标识符。因此链接的报告将按如下方式插入:insertintoperson(1,...)insertintoreport(1,...)insertintoreport(2,...)insertint

随机推荐