jQuery 可放置并可使用 PHP id 进行排序

发布于 2024-11-02 05:00:16 字数 2558 浏览 1 评论 0原文

我正在尝试将 jQuery UI droppable and sortable example 实现到我的 PHP 脚本之一...

这个想法是在用户拖动并整理所有内容后按排序顺序导出播放列表 ID 并在 PHP 中处理它们...我发现这个示例但我陷入了困境应该将 playlist_id 传递给 jQuery。到目前为止，我一直在玩一些东西，但每次我的 RecordArray[] 包含“未定义”值或者我弄乱了完整的输出:)

请帮助我完成这个简单的:)

我的 jQuery 部分如下所示：

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

和 PHP 部分：

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>";

提前致谢！！

原文

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_<".$playlist['playlist_id'].">\">";
                    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!!

分享到QQ

分享到微博