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.

Solution 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).

Solution 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
    }

Solution 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()
    });
});