Question

Using the example here as a starting point, I set out to customize my draggable and sortable data. In the linked example, we have simple text in the draggable. I replaced it with a select tag.

When dragging the select element into the sortable, I would like to use only the value of the selected option when moving it to the sortable list. To this end, I use the custom helper, but unfortunately, as soon as I drop it, it turns into a select element again.

$("#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 looking. JSFiddle is here:

PS: Removing all the classes from droppable didn’t help either, and affects when sorting within the group as well, so this is the wrong approach

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

Answer 1

Bit of a convoluted solution, but here goes:

First I modified the custom helper function in the draggable. I find the class I’m looking for, and clone only the first instance (li), but add to it the text of all the list boxes. This is due to the design of fcbkcomplete. Anyway, now we are left with a single list item and the text I need. I add the ui-state-default class to the clone, and I’m done here

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

In the droppable, I still ended up handling the drop event, but this time, using ui.helper.clone instead of 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();
                }
            });

There are still some errors I need to fix wrt css, but this works exactly as expected now 🙂