读拖放通过JavaScript有序列表 [英] reading a drag and drop ordered list via JavaScript

问题描述

我有一个应用程序（拖放使用JqueryUI.GridSort），允许用户上传照片，然后将照片的顺序进行排序，他们希望通过拖放。

在页面加载时，将提示用户上传它们发布到下一个页面的照片。当他们下页到我的PHP脚本创建一个＆LT; UL ID =排序＆GT; 包含＆LT;李＆GT; 为每次上传的文件。对于他们已经上传到网站的每个画面，一个新的＆LT;李＆GT; 创建。里面的那个＆LT;李＆GT; 是＆LT; IMG＆GT; 的设置图片为 ＆LT;李＆GT; 与形象，他们上传

我的目标是能够拯救的图片的顺序，他们已安排他们在后拖式界面。例如，一旦他们完成了安排，并在他们希望他们的顺序排序的照片，我想可以给他们发送创建一个XML文件中的另一个页面（我不与XML需要帮助，既省了顺序），使用它们以正确的顺序创建的列表

在用PHP修修补补的时间，我已经开始意识到，因为PHP是一个服务器端语言，它不能看到什么是排序后呈现。所以我的问题是，有没有办法让的JavaScript或Ajax的阅读列表的当前顺序，并将其张贴到下一页？如果你知道怎么回事，请您提供既从一个页面的POST，和后接到其他的例子吗？我不是很熟悉的阿贾克斯。

感谢各位大大任何你能提供帮助。

样品code（对于上载的每个文件创建一个李foreach语句的内容）

  $ imgID ++;


回声'＆LT;李类=UI状态默认＆GT;＆LT; IMG ID ='。$ imgID'' SRC =user_files /'.$ FILE_NAME。可拖动=真正的高度=90WIDTH =95＆GT;＆LT; /李＆GT;';
 

修改

 主页：


＆LT;脚本＆GT;
$（'＃my_form'）。在（'提交'，函数（）{
    变种ordered_list = [];
    $（＃排序里的img）。每个（函数（）{
        ordered_list.push（$（本）.attr（'身份证'））;
    }）;
    $（＃ordered_list_data）VAL（JSON.stringify（ordered_list））。
}）;
＆LT; / SCRIPT＆GT;
＆LT; D​​IV ID =测试＆GT;
＆LT;形式ID =my_form行动=update_data.php＆GT;
    ＆LT;！ - 其他领域 - ＆GT;
    ＆LT;输入类型=隐藏ID =ordered_list_data＆GT;＆LT; /输入＆GT;
    ＆LT;输入类型=提交值=继续执行步骤2＆GT;＆LT; /输入＆GT;
＆LT; /形式GT;
＆LT; / DIV＆GT;


update_data.php：

＆LT; PHP
    //处理等领域为正常
    如果（使用isset（$ _ POST ['ordered_list_data']））{
        $ img_ordering = json_de code（$ _ POST ['ordered_list_data']）;
回声1;
    } 其他 {
       回声无数据;
    }
    //做事数据

？＆GT;
 

解决方案

我建了一个的jsfiddle 的基本做同样的事情，大卫贴

我添加了一块写出来的结果页面上的分区，所以你可以看到发生了什么：

 ＆LT;输入类型=按钮ID =savebutton值=保存/＆GT;
＆LT; D​​IV ID =输出＆GT;＆LT; / DIV＆GT;
＆LT;形式ID =listsaveform方法=POST行动=script.php的＆GT;
    ＆LT;输入类型=隐藏名称=名单ID =hiddenListInput/＆GT;
＆LT; /形式GT;
 

JavaScript的：

  $（函数（）{
$（#sortable）.sortable（）;
$（#sortable）.disableSelection（）;
$（#savebutton）。点击（函数（）{LISTOBJ.saveList（）;}）;
}）;

VAR LISTOBJ = {
    saveList：函数（）{
        VAR listCSV =;
        $（#sortable李）。每个（函数（）{
            如果（listCSV ===）{
                listCSV = $（本）的.text（）;
            } 其他 {
                listCSV + =+ $（本）的.text（）;
            }
            $（＃输出）文本（listCSV）。
            $（＃hiddenListInput）VAL（listCSV）。
            // $（＃listsaveform）提交（）;
        }）;
    }
}
 

I have an application (drag and drop using JqueryUI.GridSort) that allows the user to upload photos, and then sort the photos in the order that they would like using drag and drop.

On page load, the user is prompted to upload photos which are posted to the next page. When they arrive on the next page my php script creates a <ul id="sortable"> containing <li> for each of the files they uploaded. For each picture that they have uploaded to the site, a new <li> is created. Inside of that <li> is a <img> that sets the picture for <li> with the image they have uploaded.

My goal is to be able to "save" the order of the pictures after they have arranged them in the drag and drop interface. For example, once they have finished arranging and sorting the pictures in the order they want them in, I would like to be able to send them another page that creates an xml file ( I don't need help with the XML, only saving the order) with using the list that they created in the correct order.

After hours of tinkering with PHP, I have come to realization that because PHP is a serverside language, it cannot see what is sorted post render. So my question is, is there a way to have JavaScript or Ajax read the current order of the list, and post it to the next page? If you do know how, could you please provide an example of both the POST from one page, and the post receiving on the other? I am not very familiar with Ajax.

Thank you greatly for any assistance you could provide.

Sample Code (The contents of the foreach statement that creates a LI for each file uploaded)

 $imgID++;


echo '<li class="ui-state-default"><img id="'.$imgID.'"'.' src="user_files/'.$file_name.'" draggable="true" height="90" width="95"></li>';

EDIT

main page :


<script>
$('#my_form').on('submit', function() {
    var ordered_list = [];
    $("#sortable li img").each(function() {
        ordered_list.push($(this).attr('id'));
    });
    $("#ordered_list_data").val(JSON.stringify(ordered_list));
});
</script>
<div id="tesT">
<form id="my_form" action="update_data.php">
    <!-- other fields -->
    <input type="hidden" id="ordered_list_data"></input>
    <input type="submit" value="Proceed to Step 2"></input>
</form>
</div>


update_data.php:

<?php
    // process other fields as normal
    if(isset($_POST['ordered_list_data'])) {
        $img_ordering = json_decode($_POST['ordered_list_data']);
echo "1";
    } else {
       echo "nodata";
    }
    // do things with the data

?>

解决方案

I built a JSFiddle doing basically the same thing that David posted.

I added a piece to write out the result to a div on the page, so you can see what's going on:

<input type="button" id="savebutton" value="save"/>
<div id="output"></div>
<form id="listsaveform" method="POST" action="script.php">
    <input type="hidden" name="list" id="hiddenListInput" />
</form>

Javascript:

$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
});

var LISTOBJ = {
    saveList: function() {
        var listCSV = "";
        $( "#sortable li" ).each(function() {
            if (listCSV === "") {
                listCSV = $(this).text();
            } else {
                listCSV += "," + $(this).text();
            }
            $("#output").text(listCSV);
            $("#hiddenListInput").val(listCSV);
            //$("#listsaveform").submit();
        });
    }
}

这篇关于读拖放通过JavaScript有序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！