Question

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

我已经尝试了一些附加等等的变体来将它们放入列表中，所有这些都让它们“出现”，但是不可拖动。我一直在谷歌搜索这几天，并没有找到如何实现它的明确解释。我一直在寻找关于.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>

李物品的萤火虫 - 最后两个没有所有的“魔法” enter image description here

Answer 1

在阅读了格雷格对你的问题的回答之后，这个问题让我的同事了解了问题所在。引起我们注意的是重新发表评论。

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

因为AJAX调用是ASYNCHRONOUS，所以当AJAX仍然在后台运行时，页面将继续加载。正如Greg指出这是一个计时问题，页面已经完成加载，但是AJAX没有完成加载数据并填充无序列表。因此，在将项目附加到取消顺序列表之前尝试将可拖动方法应用于列表项目将根本不起作用。我们需要在AJAX完成后应用可拖动的方法。

修复方法是使用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>

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

Answer 2

其他Greg P，让我们看看我们在这里能做些什么！可能是试图缩短代码的工件，但首先需要确保返回的数据全部被包装为数组;否则你将无法用索引迭代它。它只是您在评论中显示的数据，除了用方括号括起来：

[
  {
    "product_id": 10004,
    "product_name": "DVD"},
  {
    "product_id": 10040,
    "product_name": "CD"},
  {
    "product_id": 10059,
    "product_name": "Blue-Ray"}
]

接下来，虽然您要返回产品ID，但您的基本标记似乎没有使用它（使用3个iDevices）。我将假设您要查看名称，然后我将id存储到任意数据属性（data-productId））。

由于这些将成为列表项，您可能会看上去并让节点然后用值填充它们，但是如果您连接一个<li>字符串然后追加，那么您将得到相同的结果，这就是我要做的。您可能更喜欢构建然后填充。

var $productList = $('#catalog ul');
$.each(data, function(i, item) {
    var listItem = '<li data-productId="' + item.product_id + '">' + item.product_name + '</li>';
    $productList.append(listItem);
});

基础知识示例：http://jsfiddle.net/sQtkB/

这就是将它们添加到列表中的原因。至于使它们可拖动，这是jQuery UI的作用。如果您已将列表初始化为可拖动列表，我相信监听器本身就是列表节点，因此您可以添加它并且其成员仍应触发事件。如果没有，您可能还必须重新初始化可拖动列表。

Answer 3

循环并将新列表项追加到当前列表后，以下调用可能会确保它们具有可拖动的功能。

$.each(data, function(i,item) {
   // Create new list items as Greg show's in his post
}

$("#catalog li").draggable();

或

$("#catalog li").not(".ui-draggable").draggable()

Answer 4

看起来你将不得不使用$(selector).draggable( "destroy" );（可能是可放置的，可能是可排序的）并重新初始化。 Docs说，“破坏”将恢复原状。如果你找到另一种方式，让我们都知道。

我现在正处理类似的情况，并将使用我找到的解决方案更新此帖子。

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

4 个答案: