I want artists to be able to move images between galleries and set the order in which the images are displayed in each gallery by dragging the items within and between lists.
I am using jquery to allow the user to sort the order of items in a list as well as move items between lists.
The user will then submit a form that will be processed by a php script which will store the the gallery and order information for each image in a mysql database.
Here is my html script:
<h2>Connected Sortable Lists</h2>
<ul class="connected list">
<li><input type="hidden" name="order[1][]" value="Item #" readonly>Image 1</li>
<li><input type="hidden" name="order[1][]" value="Item #" readonly>Image 2</li>
<li><input type="hidden" name="order[1][]" value="Item #" readonly>Image 3</li>
<li><input type="hidden" name="order[1][]" value="Item #" readonly>Image 4</li>
<li><input type="hidden" name="order[1][]" value="Item #" readonly>Image 5</li>
<li><input type="hidden" name="order[1][]" value="Item #" readonly>Image 6</li>
</ul>
<ul class="connected list no2">
<li><input type="hidden" name="order[2][]" value="Item #" readonly>Item 2-1</li>
<li><input type="hidden" name="order[2][]" value="Item #" readonly>Item 2-2</li>
<li><input type="hidden" name="order[2][]" value="Item #" readonly>Item 2-3</li>
<li><input type="hidden" name="order[2][]" value="Item #" readonly>Item 2-4</li>
<li><input type="hidden" name="order[2][]" value="Item #" readonly>Item 2-5</li>
<li><input type="hidden" name="order[2][]" value="Item #" readonly>Item 2-6</li>
</ul>
<ul class="connected list no3">
<li><input type="hidden" name="order[3][]" value="Item #" readonly>Item 3-1</li>
<li><input type="hidden" name="order[3][]" value="Item #" readonly>Item 3-2</li>
<li><input type="hidden" name="order[3][]" value="Item #" readonly>Item 3-3</li>
<li><input type="hidden" name="order[3][]" value="Item #" readonly>Item 3-4</li>
<li><input type="hidden" name="order[3][]" value="Item #" readonly>Item 3-5</li>
<li><input type="hidden" name="order[3][]" value="Item #" readonly>Item 3-6</li>
</ul>
<ul class="connected list no4">
<li><input type="hidden" name="order[4][]" value="Item #" readonly>Item 4-1</li>
<li><input type="hidden" name="order[4][]" value="Item #" readonly>Item 4-2</li>
<li><input type="hidden" name="order[4][]" value="Item #" readonly>Item 4-3</li>
<li><input type="hidden" name="order[4][]" value="Item #" readonly>Item 4-4</li>
<li><input type="hidden" name="order[4][]" value="Item #" readonly>Item 4-5</li>
<li><input type="hidden" name="order[4][]" value="Item #" readonly>Item 4-6</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.sortable.js"></script>
<script>
$(function() {
$('.sortable').sortable();
$('.handles').sortable({
handle: 'span'
});
$('.connected').sortable({
connectWith: '.connected'
});
});
</script>
The jquery based scripts let the user sort the order of items in each list as well as move them between lists.
When I submit the form and access the $_POST array in php, the items show up in the new sort order in each list determined by the second key in the order array. This is the correct order of the items after they have been dragged into the desired order.
Of course, however, they are still organized into groups according to the first key in the order array because this key was hard coded into the code when the html code was generated.
Thus, even when I drag an item from one list to another, the first order key remains the same and the $_POST array organizes the items into the lists they were in before being dragged between lists.
Is there some way I can use jquery to change the first order key when it is dragged to a different list so that the key places it in the $_POST array in the list it was dragged to?
Is there another way someone can suggest for me to achieve my goal here?
Thanks,
–Kenoli