Jquery UI sortable with bootstrap bugs

Question

I need to make sortable divs in fluid bootstrap's layout.. here is my code at jsfiddle: http://jsfiddle.net/6UkdR/

        <div class="row-fluid">
<div id="sortable">
            <span class="span3">
                <div class="thumbnail">
                </div>
            </span>
            <span class="span3">
                <div class="thumbnail">
                </div>
            </span>
            <span class="span3">
                <div class="thumbnail">
                </div>
            </span>
 </div>
        </div>
    <div class="row-fluid">
<div id="sortable">
            <span class="span3">
                <div class="thumbnail">
                </div>
            </span>
            <span class="span3">
                <div class="thumbnail">
                </div>
            </span>
            <span class="span3">
                <div class="thumbnail">
                </div>
            </span>
        </div>
 </div>

1) if you try to move first or latest div in , оther divs are shifted.

2) how to connect both ? with that code, i can drag-n-sort divs only in one row but i need to sort divs from all 's.

mishik · Accepted Answer · 2013-06-12 16:56:49Z

2

Seems like an issue with a placeholder. I have added margin fix to it:

.ui-sortable-placeholder {
     margin-left: 0 !important;
}

Seems to be okay now.

Demo

And for sorting between lists you can use connectWith.

edited Jun 12, 2013 at 16:56

answered Jun 12, 2013 at 16:39

mishik

10k9 gold badges48 silver badges69 bronze badges

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

5 Comments

mishik Over a year ago

What do you mean? I can drag all 4 divs in a row and do not get "jumps".

ovnia Over a year ago

hmm..tested in opera, and it works fine, but in chrome, last div just jump down onClick.

mishik Over a year ago

I think I see it... I'm using Chrome and I manage to get it "jumpy" when HTML window is too narrow to fit "алгоритмов" in a block. If I extend it a bit - works fine. Squeeze - get jumps. I assume you can put min-width for "body" anyway to avoid "text out of borders"

mishik Over a year ago

Also, I spotted an issue with "connecting" sortables. Your sortables have 0px height, so one will not be able to drag elements from one to another. I suggest you set some "min-height". I've updated my answer.

ovnia Over a year ago

yep, but it still bugged as hell

Collectives™ on Stack Overflow

Jquery UI sortable with bootstrap bugs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related