增强 Jquery 拖放演示

Question

我有一个与 this Jquery demo 非常匹配的要求，这是一个简单的购物车演示。基本上我需要对这个演示做两个改进。

1. 我需要一个文本输入以及可用的“产品”。因此，当我拖放其中一个产品时，文本字段应随之拖动，由用户在“购物车”字段中填充。

2. 我需要在购物车中的每个商品前面加上一个“叉号”，可以用来删除某个商品。 Jquery 的“破坏”功能似乎没有这样做。那么如何实现从购物车中删除商品呢？

感谢大家的帮助。

Answer 1

您可以在可拖动定义上指定自己的“助手”。无论您指定为助手的 html 是什么，都将在拖动动画期间显示。在您的可排序（演示中的放置区域）中，您可以覆盖 beforeStop 函数。在那里，您可以用您想要实际放入购物车的任何物品替换该物品。在那，您可以使用 javascript 或其他内容添加 X 按钮以删除该项目

我最近实现了从数据表拖动到列表中，因此必须将 tr 转换为 li。它在 jQuery 1.4 中有效，但是当我在 1.5 中拖出顶部时，我得到了奇怪的结果，我还没有解决这个问题。这是我的助手定义

helper: function() {
        var text = this.children[0].innerText;
        var result = "<li id='"+this.id+"'>"+text+"</li>";
        return result;
    },

这是我的 beforeStop 函数

beforeStop: function( event, ui ) {
        var id = ui.helper.attr( "id" );
        var text = ui.helper.text();
        var li = "<li id='"+id+"'>"+text+"</li>";
        $(ui.item).replaceWith( li );
    }