javascript - 增强 Jquery 拖放演示

Question

我有一个非常符合 this Jquery demo 的要求，这是一个简单的购物车演示。基本上，我需要对该演示进行两项改进。

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

2. 我需要在购物车中的每件商品前面加一个“叉号”，它可以用来删除某个商品。 Jquery 的“销毁”功能似乎并没有做到这一点。那么如何完成从购物车中删除商品呢？

感谢所有的帮助。

Answer 1

您可以在可拖动定义上指定您自己的“助手”。无论您指定什么 html 作为您的助手，拖动动画期间都会显示什么。在您的 sortable(演示中的放置区域)中，您可以覆盖 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 );
    }