CODEWITHSUNDEEP
javascriptjqueryjquery-uitwitter-bootstrap
Kyle Needham
Kyle Needham

Reputation: 3389

jQueryUI Sortable Item Incorrect Position While Dragging

I have a jQueryUI sortable list which contains three bootstrap panels, panels 1 and 2 start dragging with the correct initial positions, however whenever you try to drag panel 3 it drops under panel 1 offset from the cursor. Live demo

HTML

<ul id="sortable">
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">1</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">2</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">3</div>
            <div class="panel-body"></div>
        </div>
    </li>
</ul>

JavaScript

$('#sortable').sortable({
    tolerance: 'pointer',
    handle: '.panel-heading',
    placeholder: 'col-xs-4 panel-al-placeholder',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});

CSS

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    border:2px solid #f8e287;
    background:#fef9e7
}

Upvotes: 11

Views: 12820

Answers (3)

J&#248;rgen Skoglund Hansen
J&#248;rgen Skoglund Hansen

Reputation: 51

when working on an old page with bootstrap 3, if found the top position was changing when the page where scrolled.

took some time to figure out that I could just add 'appendTo' the body, and then the issue where fixed.

$("#sortable").sortable({
  appendTo: document.body,
  update: function(event, ui) {
       //some function();
  }
});

hope someone else saves time with this info.

Upvotes: 0

jodeci
jodeci

Reputation: 996

I had a similar problem, setting the helper to clone mode worked for me:

$('#sortable').sortable({
    helper: 'clone'
});

Upvotes: 24

lakerz
lakerz

Reputation: 1

I had the same problem. I've found in the past that the CSS stylebox-sizing: border-box; that bootstrap sets globaly can cause issues with some javascript libraries, and it turned out to be the issue in this case as far as I can tell. I've come up with a quick fix that sets the box-sizing back to the CSS2 default box-sizing: content-box; for the columns.

Unfortunately this plays havoc with the column layout in bootstrap because the padding of the columns is now added onto the percentage width, so our 3 columns end up being wider than 100%. For my code, I didn't actually need any padding between my columns so I just set a negative margin on my columns to offset the extra width.

For more information about the box-sizing CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Live demo

HTML

<ul id="sortable">
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">1</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">2</div>
            <div class="panel-body"></div>
        </div>
    </li>
    <li class="col-xs-4">
        <div class="panel panel-default">
            <div class="panel-heading ui-sortable-handle">3</div>
            <div class="panel-body"></div>
        </div>
    </li>
</ul>

Javascript

$('#sortable').sortable({
    tolerance: 'pointer',
    handle: '.panel-heading',
    start: function (e, ui) {
        ui.placeholder.height(ui.item.children().height());
    }
});

CSS

ul {
    width: 650px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.col-xs-4 {
    box-sizing: content-box;
    margin: 10px -16px;
}
.panel-al-placeholder {
    margin-bottom: 18px;
    background:#fef9e7
}

Upvotes: 0

Related Questions