Jquery Ui Sortable bug with bootstrap grid

Question

This pretty much has me beat. Turning the placeholder option on in jquery ui causes it to only appear in the top left corner and if you look at the animation once an element has been sorted it goes up to the top left corner before going in the place it was dropped.

$(".widget-row").sortable({
        connectWith:".widget-row",
        helper:"clone",
        revert:true,
        placeholder: "ui-state-highlight",
        opacity:0.5,
         grid: [ 20, 10 ] ,
        start: function(e, ui ){
            ui.placeholder.height(ui.helper.outerHeight());
            ui.placeholder.width(ui.helper.outerWidth());
            //console.log(ui.helper.attr('id'));
        },
        update: function(event, ui){
            arrange_doc();
        }
    });

Sample is on Js Fiddle

Any help is greatly appreciated.

I think its bcoz the sortable elements have different width.Is it really necessary to have diffrent width? — Arun Unnikrishnan
– Arun Unnikrishnan, Commented Jul 11, 2013 at 16:55
Yes, the items will become widgets and the user can select the width, it works perfectly fine except when i turn the placeholder option on @Arunu — Patsy Issa
– Patsy Issa, Commented Jul 11, 2013 at 17:00

Community · Accepted Answer · 2017-05-23 11:59:40Z

2

After a ton of research i have found it, giving the placeholder a bootstrap class such as span1-2-3-4... makes it behave normally again.

Answer containing the solution.

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Jul 11, 2013 at 18:29

Patsy Issa

11.3k5 gold badges57 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery Ui Sortable bug with bootstrap grid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related