Select from list using jQuery drag and drop

Question

I have items that my php file outputs to a webpage as an unordered list. I want to select these items and then put them into an array.

I would like to use the jQuery drag and drop functionality as seen here in the first answer:

jQuery Sortable - Select and Drag Multiple List Items

and subsequently demonstrated in the fiddle here:

http://jsfiddle.net/T68Fn/

My question is, how do I get the dragged items into an array that I can use with php? Here is the html from the above code:

<div class="demo">
    <p>Available Boxes (click to select multiple boxes)</p>    
    <ul id="draggable">
        <li>Box #1</li>
        <li>Box #2</li>
        <li>Box #3</li>
        <li>Box #4</li>
    </ul>

    <p>My Boxes</p>
    <ul id="droppable">
    </ul>

</div>

Thanks in advance.

What is the trigger for when you get the dragged items into php? — Explosion Pills, Dec 18 '12 at 20:51
@ExplosionPills - The list contains filenames. After the manual drag and drop I'll use a submit button to run code using the dropped filenames. — Sara44, Dec 18 '12 at 21:17

score 0 · Answer 1 · answered Dec 18 '12 at 20:56

Copy the contents of your UL into an input [type=text] field and submit to your PHP script.

In your PHP script you can split your input string into and array on

http://php.net/manual/en/function.str-split.php

You may have to trim and clean up your string a little, but you get the idea.

Hope this helps.

Good Luck.

Select from list using jQuery drag and drop

1 Answers1