Geek asks and answers

JQuery-UI sort sort by submit form

Images are downloaded from the database. I would like to sort the order of an image using jQuery-UI, sort and save the data in the submit form.

<script type="text/javascript">
    $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight",
            cursor: 'crosshair'
    });
        $( "#sortable" ).disableSelection();
});
</script>

<form action="" method="post">
<ul id="sortable" style="width: 524px;">
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li>
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li>  
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
</form>
+5
source share
2 answers

When sorting, update the values ​​each time in a hidden input field using update: function(){}in sortable. Here is my code that updates hidden input when sorting every time. When the form is submitted, the values ​​will be sent to the server.

<form action="" method="post">
    <input type="hidden" id="image_order" name="image_order" value="" />
<ul id="sortable" style="width: 524px;">
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li>
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li>  
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
</form>​


 $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight",
            cursor: 'crosshair',
            update: function(event, ui) {
                var order = $("#sortable").sortable("toArray");
                $('#image_order').val(order.join(","));
                alert($('#image_order').val());
            }
    });
        $( "#sortable" ).disableSelection();
});​

Here is a demon.

+12
source

here is a basic solution according to my thinking

create a hidden input and save its order in it.

<script type="text/javascript">
    $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight",
            cursor: 'crosshair',
            update: function(event, ui) {

      var Order = $("#sortable").sortable('toArray').toString();
      $('#order').val(Order);
 }
    });
        $( "#sortable" ).disableSelection();
});
</script>

<form action="" method="post">
<ul id="sortable" style="width: 524px;">
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li>
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li>  
</ul>
<div style="clear:both;"></div>
<input name="order"  type="hidden" />
<input name="Submit" value="RE-ORDER" type="submit" />
</form>

Now you can get an order from order.

+4
source

More articles:


All Articles