我如何从阿贾克斯GET的结果添加可拖动列表项？ [英] How do I add draggable List Items from the result of a .ajax GET?

问题描述

我希望能够以我自己的项目，从琳琅满目的产品添加到列表拖动从阿贾克斯调用返回的基础上，在的 http://jqueryui.com/demos/droppable/#shopping-cart 。

I want to be able to add my own items to a draggable list from an array of products returned from an .ajax call, based on the shopping cart example at http://jqueryui.com/demos/droppable/#shopping-cart.

我已经尝试了一些附加等的变化，让他们进入榜单，所有这些都让他们出现，但不能拖动。我一直在Google上搜寻这几天的，和我没有找到如何完成它一个明确的解释。我一直在寻找有关.live答案，但是这显然是一个去precated解决方案。

I've tried a number of variations of appending, etc. to get them into the list, all of which get them to "appear", but are not draggable. I've been googling this for a couple of days, and am not finding a clear explanation of how to accomplish it. I keep finding answers about .live, but that is apparently a deprecated solution.

下面是基本的code我试图使工作。我已经离开了半打尝试我，希望有人可以给我做的最正确的方式，而不是试图提高在一堆我的实验进行。如果它的事项，该code是打开一个模式对话框的形式时要执行。

Here's the basic code I'm trying to make work. I've left out the half dozen attempts I've made in hopes that someone will give me the most "correct" way of doing it, rather than try to improve upon a bunch of my experiments. If it matters, this code is to be executed when opening a modal dialog form.

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

的李项萤火虫 - 近两年没有所有的神奇

Firebug of the LI items - the last two don't have all the "magic"

推荐答案

看起来像你将不得不使用 $（选择）.draggable（消灭）; （以及可能的投掷的和可能的排序），并重新初始化。文档说，消灭将恢复到原来的状态，虽然。让我们大家都知道，如果你找到另一种方式。

Looks like you're going to have to use $(selector).draggable( "destroy" ); ( and possibly droppable and possibly sortable ) and re-initialize. Docs say that "destroy" will return to original state though. Let us all know if you find another way.

我工作的一个类似的情况，现在，将更新这个帖子的解决方案，我觉得。

I am working on a similar situation now, and will update this post with the solution I find.

这篇关于我如何从阿贾克斯GET的结果添加可拖动列表项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！