Question

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

这个想法是在用户拖拽并整理所有内容以按排序顺序导出播放列表ID并在PHP中处理它们之后...我找到了this example但是我已经陷入了我应该将playlist_id传递给jQuery的。到目前为止，我一直在玩一些东西，但每次我的recordsArray []包含'undefined'值或者我搞乱了完整输出：）

请帮我解决这个简单的问题：）

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

提前致谢!!

Answer 1

drop事件中的ui对象是一个被删除的实际元素，所以要获取id

ui.draggable.attr('id')

Answer 2

我认为你必须做两件事：

而非$( "#playlist li" ).draggable({必须为$( "#playlist ul" ).draggable({
通过$（document）.ready（function（）{}）

jQuery可以使用PHP ID进行droppable和sortable

2 个答案: