jquery ui draggable changes the width automatically

Question

I am following through jquery ui docs to make the divs draggable and sortable. And it does work for dragging and sorting. But when I take out a div from draggable to sortable, the width of the draggable changes and does not retain the width its supposed to be.

Here is the demo

js:

$(function() {
    $('#grid-main_content').sortable({
        revert:true
    });

    $('#block-list .block').draggable({
        connectToSortable: '#grid-main_content',
        helper: 'clone',
        revert:'invalid'
    });
})

And if I inspect the element which I dragged to the sortable, I can see that an inline style is given to the draggable block with a width (by jquery).

How can I maintain the style the block already has? Thank you.

Answer 1

You can use draggables' start event, to maintain specific style of the helper

$('#block-list .block').draggable({
    connectToSortable: '#grid-main_content',
    helper : 'clone',
    revert : 'invalid',
    start  : function(event, ui){
        $(ui.helper).addClass("ui-helper");
    }
});

CSS:

.ui-helper {
    width: 100% !important;
}

Demo

Answer 2

This worked for me. Just set it to the width of the draggable element

$('.selector').draggable({
   helper: 'clone',
   start: function(event, ui){
      $(ui.helper).css('width', `${ $(event.target).width() }px`);
   }
})

that way you don't have add the CSS