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.

Solution 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

Solution 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

Comments

[Kakar]

Yes. Its working. But it just covers up the the whole width of the browser when I drag it. It does however retain the width inside #grid-main_container but is it possible to have the width of the draggable block to maintain even when its dragged? Like the ones with your comment with jquery ui 1.10.4 .

[Dunc]

You can use .ui-draggable-dragging in the latest jQuery UI, removing the need for custom JavaScript.

[Matstar]

Neither this nor Steven Kaspar's solution worked for me with a draggable <tr> in Chrome. It seems an absolutely positioned <tr> won't contain its <td>s properly. If you set a background colour or border on the `<tr>, it will have the right width, but the table cells will leave a gap on the right.