How to make the style of a dragged item fit the target using a custom helper or any other method?

Question

Using the example here as a starting point, I decided to set up my draggable and sortable data. In a related example, we have plain text in draggable. I replaced it with a select tag.

When dragging a select element into a sortable one, I would like to use only the value of the selected parameter when moving it to the sortable list. To do this, I use the user assistant, but, unfortunately, as soon as I drop it, it again becomes an element of choice.

$("#draggable").draggable({
   connectToSortable: "#sortable",
   opacity: 0.8,
   cursor: "move",
   helper: function () {
       return $("<div>" + $(this).text() + "</div>");
   },
   distance: 20
});

How can i fix this? Thanks for watching. JSFiddle here :

PS: droppable , ,

$("#sortable").droppable({
   drop: function (event, ui) {
       alert('dropped');
       $(ui.draggable).removeClass();
   },
   activeClass: "ui-state-hover",
   hoverClass: "ui-state-active"
});

Answer 1

, :

draggable. , , (li), . fcbkcomplete. , , . ui-state-default ,

                $("#draggable").draggable({
                distance: 10,
                cursor: "move",
                helper: function (e, ui) {
                    var newListItem = $(this).find('.bit-box').first().clone().removeClass().addClass("ui-state-default");
                    var fullCommand = "";
                    $(this).find('.bit-box').each(function( index ) {
                        fullCommand += $(this).text() + " ";
                    });

                    newListItem.text(fullCommand);
                    return (newListItem);
                },
                revert : true
                });

droppable drop, , ui.helper.clone ui.draggable.

                $("#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();
                }
            });

, wrt css, , :)