jquery - 如何从 .ajax GET 的结果添加可拖动列表项？

Question

我希望能够将我自己的项目添加到从 .ajax 调用返回的产品数组中的可拖动列表中，基于 http://jqueryui.com/demos/droppable/#shopping-cart 中的购物车示例.

我尝试了多种附加方式等，将它们放入列表中，所有这些都让它们“出现”，但不可拖动。我已经在谷歌上搜索了几天，但没有找到如何完成它的明确解释。我一直在寻找有关 .live 的答案，但这显然是一个已弃用的解决方案。

这是我正在尝试工作的基本代码。我遗漏了我所做的六次尝试，希望有人能给我最“正确”的方法，而不是试图改进我的一堆实验。如果重要的话，此代码将在打开模式对话框表单时执行。

    $.ajax({
        type: "POST",
        url: "GetMyProducts.php",
        data: dataString,
        dataType: "json",
        success: function(data) {
            // data returned is:
            // {"product_id": 10004, "product_name": "DVD"}, 
            // {"product_id": 10040, "product_name": "CD"}, 
            // {"product_id": 10059, "product_name": "Blue-Ray"}
            $.each(data, function(i,item) {
                // WHAT do I do here to append my data as a draggable List Item?
            });
        }
    });

    <div id="products">
        <h1 class="ui-widget-header">Products</h1>    
        <div id="catalog">
            <h3>My Products</h3>
            <div>
                <ul>
                    <li>iPhone</li>
                    <li>iPod</li>
                    <li>iPad</li>
                </ul>
            </div>
        </div>
    </div>

LI 项目的 Firebug - 最后两个没有所有的“魔力”

Answer 1

在阅读了格雷格对你的问题的回答后，我的同事明白了问题所在。给我们提供线索的是 reinitialize 注释。

以我有限的理解，我会按照我的理解进行解释，也许其他人可以详细说明。

由于 AJAX 调用是异步的，因此当 AJAX 仍在后台工作时，页面将继续加载。正如 Greg 指出的那样，这是一个计时问题，页面已完成加载，但 AJAX 尚未完成加载数据并填充无序列表。因此，在将项目附加到无序列表之前尝试将可拖动方法应用于列表项将根本不起作用。我们需要在AJAX完成后应用draggable方法。

修复方法是使用 ajax 方法的 COMPLETE 选项，在将列表项加载到无序列表元素后将可拖动方法应用于列表项。或者，一旦 AJAX 调用 100% 完成，则使已添加到无序列表元素的列表项可拖动。

因此以您的代码为例......

$.ajax({
    type: "POST",
    url: "GetMyProducts.php",
    data: dataString,
    dataType: "json",
    success: function(data) {
        // data returned is:
        // {"product_id": 10004, "product_name": "DVD"}, 
        // {"product_id": 10040, "product_name": "CD"}, 
        // {"product_id": 10059, "product_name": "Blue-Ray"}
        $.each(data, function(i,item) {
            //IN HERE IS WHERE YOU POPULATE THE UNORDERED LIST WITH THE LIST ITEMS
        });
    },
    complete: function() {
        $('ul li').draggable();
    }
});

<div id="products">
    <h1 class="ui-widget-header">Products</h1>    
    <div id="catalog">
        <h3>My Products</h3>
        <div>
            <ul>
                <li>iPhone</li>
                <li>iPod</li>
                <li>iPad</li>
            </ul>
        </div>
    </div>
</div>

希望这是有道理的，并且它可以在将来帮助其他人。