html - reading a drag and drop ordered list via JavaScript - Stack Overflow

admin管理员组

文章数量:1334342

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 e 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 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 e 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

?>

• javascript
• html
• ajax
• jquery-ui
• html-lists

Share Improve this question Follow edited Jul 18, 2013 at 21:22 Robert Dickey asked Jul 18, 2013 at 19:49 Robert DickeyRobert Dickey 83411 gold badge1515 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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();
    }
}

If you're using a <form> you can do something like this (assuming jQuery is being used):

$('#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));
});

In essence, what you're doing is looping over the <ul>, fetching each <img> and appending the ids (in order of appearance) to an array. Arrays preserve ordering in JavaScript and JSON, so one can turn it into a JSON string using the JSON.stringify function, set it as the value of a <input type="hidden"> field and then submit the form.

If you want to use AJAX, the functionality is very similar. However, instead of using an onsubmit (or onclick) you'd use $.post.

Let's go with the <form> option since it's simpler. All told you'll have something similar to the above JS along with HTML like this:

<form id="my_form" method="post" action="./update_data.php">
    <!-- other fields -->
    <input type="hidden" name="ordered_list_data" id="ordered_list_data"></input>
    <input type="submit" value="Submit"></input>
</form>

Then, in update_data.php (or whatever your script is named):

<?php
    // process other fields as normal
    if(isset($_POST['ordered_list_data'])) {
        $img_ordering = json_decode($_POST['ordered_list_data']);
    } else {
        // handle case where there is no data
    }
    // do things with the data
?>

本文标签： htmlreading a drag and drop ordered list via JavaScriptStack Overflow