HP1 HP1 - 1 month ago 6
jQuery Question

Bootstrap jquery sortable only sorts rows?

I've been trying to get sortable to work with a bootstrap grid of buttons. It's a responsive design, with multiple rows containing 3 buttons each. I can turn on sortable on the overall container, which lets me drag and drop the buttons, but it does it for the whole row. I want to be able to select individual buttons and drag and drop them to other rows. I would think

$("buffer0,#buffer1,#buffer2").sortable({
connectWith: "#buffer0,#buffer1,#buffer2"
})


would work, but that doesn't allow for any dragging and dropping. I've created a fiddle that shows how this works. (resize the output screen so you can see the rows)

Really appreciate any insight, been staring at this for hours and don't know where do go.

https://jsfiddle.net/7yhkp9eo/

Answer Source

You can use:

items: specifies which items inside the element should be sortable.

and

tolerance: specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values.

$("#list_content").sortable({
    tolerance: "pointer",
    items: ".col-sm-4"
});
$("#list_content").disableSelection();
@import url('//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div id="list_content">
    <div id="buffer0" class="row top-buffer">
        <div id="row0" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
            <div class="col-sm-4">
                <a link-type="c" href="#0,1" class="btn btn-default btn-lg btn-block btn-list  navbutton-padding"
                   role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T11</a>
            </div>
            <div class="col-sm-4">
                <a link-type="c" href="#0,2" class="btn btn-default btn-lg btn-block btn-list  navbutton-padding"
                   role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T12</a>
            </div>
            <div class="col-sm-4">
                <a link-type="c" href="#0,3" class="btn btn-default btn-lg btn-block btn-list  navbutton-padding"
                   role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T13</a>
            </div>
        </div>
    </div>
    <div id="buffer1" class="row top-buffer">
        <div id="row1" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
            <div class="col-sm-4">
                <a link-type="c" href="#0,4" class="btn btn-default btn-lg btn-block btn-list  navbutton-padding"
                   role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T21</a>
            </div>
            <div class="col-sm-4">
                <a link-type="c" href="#0,5" class="btn btn-default btn-lg btn-block btn-list  navbutton-padding"
                   role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T22</a>
            </div>
            <div class="col-sm-4">
                <a link-type="c" href="#0,6" class="btn btn-default btn-lg btn-block btn-list  navbutton-padding"
                   role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T23</a>
            </div>
        </div>
    </div>
    <div id="buffer2" class="row top-buffer">
        <div id="row2" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
            <div class="col-sm-4">
                <a link-type="c" href="#0,7" class="btn btn-default btn-lg btn-block btn-list  navbutton-padding"
                   role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T31</a>
            </div>
            <div class="col-sm-4">
                <a link-type="c" href="#0,8" class="btn btn-default btn-lg btn-block btn-list  navbutton-padding"
                   role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T32</a>
            </div>
            <div class="col-sm-4">
                <a link-type="c" href="#0,9" class="btn btn-default btn-lg btn-block btn-list  navbutton-padding"
                   role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T33</a>
            </div>
        </div>
    </div>
</div>