CODEWITHSUNDEEP
phpjqueryjquery-uidraggablejquery-ui-sortable
errata
errata

Reputation: 6041

jQuery droppable and sortable with PHP ids

I am trying to implement jQuery UI droppable and sortable example into one of my PHP scripts...

The idea is after user drags and sort out everything to export playlist ids in sorted order and process them in PHP... I have found this example but I'm stuck in the point where I should pass playlist_id to jQuery. So far I've been playing with some stuff, but each time my recordsArray[] contains 'undefined' values or I mess up complete output :)

Please help me with this easy one :)

My jQuery part looks like this:

<script> 
    $(function() {
        $( "#playlist li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        $( "#export ol" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
                // GET ID SOMEHOW HERE!
                $( "<li id='???'></li>" ).text( ui.draggable.text() ).appendTo( this );
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
                $( this ).removeClass( "ui-state-default" );
            },
            update: function() {
                var order = $(this).sortable("serialize");
                $.post("<?php echo site_url('export/all/'); ?>", order);
            }
        });
    });
</script>

and PHP part:

echo "<div id=\"playlists\">";
    echo "<h3>PLAYLISTS</h3>";
    echo "<div id=\"playlist\">";
        echo "<div>";
            echo "<ul>";
                foreach ($all_playlists as $playlist) {
                    echo "<li id=\"recordsArray_&lt;".$playlist['playlist_id']."&gt;\">";
                    echo "<font size=\"1\">".getFormattedDateAndTime($playlist['time'])."</font> ".br();
                    echo "<font size=\"2\"><b>".$playlist['playlist_name']."</b></font>";
                    echo "</li>";
                }
            echo "</ul>";
        echo "</div>";
    echo "</div>";
echo "</div>";

echo "<div id=\"export\">"; 
    echo "<h3>EXPORT</h3>";
    echo "<div class=\"ui-widget-content\">"; 
        echo "<ol>";
            echo "<li class=\"placeholder\">DRAG HERE...</li>"; 
        echo "</ol>";
    echo "</div>"; 
echo "</div>";

Thanks in advance!!

Upvotes: 0

Views: 1443

Answers (2)

Reporter
Reporter

Reputation: 3948

I think you have to do two things:

  • instead of $( "#playlist li" ).draggable({ must be $( "#playlist ul" ).draggable({
  • start the javascript code via $(document).ready(function(){})

Upvotes: 0

Elijan
Elijan

Reputation: 1416

Your ui object in drop event is an actual element being dropped, so to get the id

ui.draggable.attr('id')

Upvotes: 2

Related Questions