增强Jquery的拖放演示 [英] Enhancing a Jquery drag-and-drop demo

问题描述

我的要求与这个Jquery demo 非常接近简单的购物车演示。基本上，我需要对这个演示进行两个改进。

I have a requirement that very closely matches this Jquery demo, which is a simple shopping cart demo. Basically I need to make two enhancements into this demo.

1. 我需要一个文本输入以及可用的产品。所以当我拖放一个产品时，文本字段应该被拖动，这将被用户在购物车字段中填充。

1. I need a text input alongwith with the available "products". So when I drag-drop one of the products, the text fields should be dragged along with that, which will be filled by user in the "cart" field.

我需要在购物车中的每个项目前面的交叉，可以用于删除某个项目。 Jquery的破坏功能似乎并没有这样做。那么如何才能从购物车中完成项目的删除？

I need a "cross" in front of each item in cart, which can be used to delete a certain item. Jquery's "destroy" function doesn't seem to do that. So how can I accomplish deletion of items from shopping cart?

感谢所有的帮助。 b $ b

Thanks for all the help.

推荐答案

您可以在draggable定义上指定自己的helper。无论你指定什么html你的帮助器是什么将在拖动动画中显示。在您的排序（演示中的放置区域）中，您可以覆盖beforeStop函数。在那里，您可以用您想要实际放入购物车的任何物品来替换物品。在这种情况下，您可以添加带有javascript或某些东西的X按钮来删除项目

You can specify your own "helper" on the draggable definition. Whatever html you specify as your helper is what will be shown during the drag animation. In your sortable (the drop area in the demo) you can override the beforeStop function. In there you can replace the item with whatever you want to be actually dropped into your shopping cart. In that, you could add the X button with javascript or something to remove the item

我最近实现了将其从数据表拖到列表中，所以不得不转换进入李。它在jQuery 1.4中起作用，但是当我从1.5中拖出顶部时，我会在下降时获得奇怪的结果，我还没有解决。这是我的帮手定义

I recently implemented this to drag from a datatable into a list, so had to convert the tr into an li. It works in jQuery 1.4 but I get strange results on the drop when I drag out of the top in 1.5, and I haven't resolved that yet. Here's my helper defintion

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

这里是我的beforeStop函数

and here's my beforeStop function

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 );
    }

这篇关于增强Jquery的拖放演示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！