How to clear styles from .draggable children before moving them to the target?

Question

I have a div in which I do some manipulation of list items using the excellent fcbk full jquery plugin. However, when I connect this using my draggable and sortable page, I realized that the extra decorations are frozen when I switch. This means that the end result is felt unpolished, to say the least. I know that I can catch the mousedown event before dragging and dropping, but I don’t know which elements to change to make the style simple.

Here is a demo of fcbkcomplete , it resembles the facebook message composition feature. In my jsfiddle, as soon as I am ready to drag the div into the sortable list below, I want all the fancy styling (closing the image, splitting into blue fields, the hint "Start printing ..." and the final empty text box to be replaced with a simple line, so that when I click on the h1 header, I can still get the values. Does anyone know how to do this?

                            $("#draggable").draggable({
                            connectToSortable: "#sortable",
                            helper: "clone",
                            revert: "invalid",
                            distance: 20
                        });

                        $('#draggable').each(function () {
                            $(this).mousedown(function () {

                                // Need to clear styles here
                                //$(this).parent().children('.maininput').hide('blind', 500);
                            });
                        });

Thanks for watching. JSFiddle here. And here is a screenshot of the problem .

Answer 1

, . , . droppable,

                $("#container").droppable({
                accept: '.product',
                drop: function (event, ui) {
                    var x = ui.helper.clone();
                    x.removeClass().attr('style', '');
                    x.addClass("ui-state-default");
                    x.appendTo('#container');
                    ui.helper.remove();
                }
            });

, !