Question

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

2. 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?

Thanks for all the help.

Answer 1

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

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

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