jquery ui draggable + sortable helper style

Question

I am using jquery ui plugin to realize a drag and drop linked to a sortable list element. When I move the draggable element, a helper is created with a custom width and height. When my element is above the sortable area, an inline style is created and affects my custom width and height. The helper no longer has the right dimensions and takes 100% of the width of the sortable zone. You can see an example on the jquery ui example here http://jqueryui.com/draggable/ # sortable My goal is to prevent the insertion of inline style for the height and width of the helper. Is that possible?

I have try the sortable forcehelpersize parameter but with no success.

edit : I noticed that when I'm over the sortable area, the helper takes the dimensions of the initial element draggable.

Hofuf

can we some of your code that you are trying ? – Anette

No doubt many will disagree, but depending on how you structure your CSS (especially whether it will cause confusion for future development work) you could ensure the application of width and height using the !important property. – Wrongly

Answer 1

Unfortunately, the ui.sortable code that sets the width of your helper does not consider a width on the class as specified. I'm using jQuery 1.8.x and stumbled into this same behaviour. Looking at the source code, I saw that ui.sortable is checking if the width style is specified on the element and if not, will set it to the width of the first element in the sortable. My solution was to explicitly set the width and height on the helper using the function form of the draggable helper option.

$('#draggable').draggable({
    helper: function() {
        var helper = $(this).clone(); // Untested - I create my helper using other means...
        // jquery.ui.sortable will override width of class unless we set the style explicitly.
        helper.css({'width': '462px', 'height': '300px'});
        return helper;
    }
});

Those values don't have to be hard coded. You could copy them from another element, for example. But they do need to be set on the helper element itself (not inherited).

Day

Answer 2

Old question, google doesn't mind. Therefore this may still be usefull to some people. I use the event on the sortable object as follows:

$('#element').sortable({
    receive: function(event, ui) {
        ui.helper.first().removeAttr('style'); // undo styling set by jqueryUI
    }

Majorette

Answer 3

At the top of the .ready function initialize the width to the actual width. If there is just one element use:

$('#myDraggable').css({
    'width' : $('#myDraggable').width()
});

If there are multiple elements you can loop through using:

$( "#myDraggable > div" ).each(function( index ) {
    $(this).css({
        'width':$(this).width()
    });
});

Consecration

Answer 4

You could also grab the width and height of the cloned element, and use those to set the width and height of the clone itself.

helper: function() {
  var helper = $(this).clone(); // Untested - I create my helper using other means...
  // jquery.ui.sortable will override width of class unless we set the style explicitly.
  helper.css({'width': $(this).width(), 'height': $(this).height()});
  return helper;
}

Gilbertina

Answer 5

Please, try this:

$('#draggable-id').draggable({
    stop: function ( event, ui ) {
         $(ui.helper[0]).attr('style', '');
         //your css
         //$(ui.helper[0]).css({});
    },
});

Gschu

Answer 6

Why not use event and ui vars that the function of helper offers instead of searching for helper with jQuery ?

For example I added a table around my element with prepend/append to keep style of my tr when moving it.

helper: function(event, ui) {
    ui.prepend('<table class="sorting table table-striped table-hover table-bordered"><tbody>')
      .append('</tbody></table>');
    ui.addClass('my-helper');
    return ui;
},

You can also use the existing .ui-sortable-helper class :

.ui-sortable-helper {
    background-color: #ccc !important;  
}
.ui-sortable-helper td {
    padding: 0px 5px;
}

And on stop function you can easily remove the elements you don't need anymore like this :

stop: function(e, ui) {
    $('.sorting').replaceWith(function() {
        return $('tr', this);
    });
},

Inverson