How can I clear the styles on a .draggable element's children, before moving them to the target?

Question

I have a div in which I do some manipulation of list-items using the excellent fcbkcomplete jquery plugin. However, when i plug this in with my draggable and sortable page, I realized that the extra decorations are frozen when I move it over. This makes the end result feel unpolished, to say the least. I know I can intercept the mousedown event before the drag, but I don't know what elements to modify to keep the style simple.

Here is a demo of fcbkcomplete, it resembles facebook's message compose feature. In my jsfiddle, once I am ready to drag the div to the sortable list below, I want all the fancy decoration (close image, separation into blue boxes, the "Start to type..." tooltip, and the final empty textbox to be replaced by a simple string, such that when I click on the h1 header, I still can retrieve 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 looking. JSFiddle is here. And here is a screenshot of the problem.

You could use a custom helper : http://jqueryui.com/draggable/#visual-feedback — sdespont, Jan 12 '13 at 12:44
Tried it, but didn't work. Attaching a simpler, trimmed-down JSFiddle: http://jsfiddle.net/parikramatic/7KEGs/ — Freakishly, Jan 13 '13 at 00:38
I ended up modifying the helper of the draggable from clone to custom instead — Freakishly, Jan 13 '13 at 08:33

score 2 · Accepted Answer · edited May 23 '17 at 11:46

Asked a similar question, and the answer solves this problem as well. Had to use the custom helper instead of clone, but everything worked out fine. As for the 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();
                }
            });

the problem is, I wasn't using one!

How can I clear the styles on a .draggable element's children, before moving them to the target?

1 Answers1

Linked