Jquery ui draggable + sortable helper style

Question

I am using jquery ui plugin to implement the drag and drop associated with the sortable list item. When I move the dragged item, 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 assistant no longer has the correct size and occupies 100% of the width of the sorted area. You can see an example jquery ui example here http://jqueryui.com/draggable/ # sortable My goal is to prevent the inline style from being inserted for the height and width of the helper. Is it possible?

I tried the forcehelpersize sortable parameter, but without success.

edit: I noticed that when I go to the sortable area, the helper takes the dimensions of the original item being dragged.

Answer 1

Unfortunately, the ui.sortable code that sets the width of your helper does not account for the width of the class as indicated. I am using jQuery 1.8.x and stumbled upon the same behavior. Looking at the source code, I saw that ui.sortable checks if the width style is specified in the element, and if not, it is set by the width of the first element in the sortable one. My solution was to explicitly set the width and height for the helper using the form of the drag-and-drop helper option function.

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

These values ​​do not have to be hardcoded. For example, you could copy them from another element. But they must be installed on the auxiliary element itself (not inherited).

Answer 2

An old question, google doesn't mind. Therefore, it may be useful to some people. I use an event on a sortable object as follows:

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

Answer 3

You can also capture the width and height of the cloned item and use them 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; } 

Answer 4

At the top of the .ready function, initialize the width of the actual width. If only one item is used:

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

If there are several elements, you can execute a loop:

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

Answer 5

This will prevent JqueryUI Helper from being configured:

 $( "#element" ).sortable({ start: function(event, ui){ ui.helper.css("width", "auto"); // or set a value if constant } });