Jquery UI Sortable + Bootstrap variable height Divs sorting issue

Question

Need your Help for fixing the issue regarding UI Sortable with bootstrap,I can achieve this sortable functionality in bootstrap but still there is a issue not able to fix by myself. My Fiddle link : http://jsfiddle.net/wrtfp513/

Issue : Here(check my fiddle) I divided into three parts(.part1,.part2,.part3) I can sort my 'Test' contents anywhere within these three parts but when I sort all 'Test' contents into 'part1' there is an issue 'Not able to sort into .part2 as well as .part3 respectively'

My Code :

<div class="container">
    <div id="drag_holder" class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4 part1">
           <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 1</div>
                  <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting indu  Ipsum.</div>
              </div>
            </div>
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 2</div>
                  <div class="panel-body">Contfghfghent</div>
              </div>
            </div>
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 3</div>
                  <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry </div>
              </div>
            </div>
        </div>

        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4 part2">
             <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 4</div>
                  <div class="panel-body">Content</div>
              </div>
            </div>
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 5</div>
                  <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry.  </div>
              </div>
            </div>
        </div>


        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4  part3">
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 6</div>
                  <div class="panel-body">Content</div>
              </div>
            </div>
            <div class="col-lg-12 drag_content"> 
              <div class="panel panel-default">
                  <div class="panel-heading">Test 7</div>
                  <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry.   1500s, when an unknown printer took a galley of type  t  </div>
              </div>
            </div>
        </div>


    </div>
</div>

Script :

$(function () {
var demos =$("#drag_holder");
    demos.sortable({
         items: ".drag_content",
       placeholder: "panel"
    });

});

Thanks In Advance Guys..

score 1 · Accepted Answer · answered Feb 16 '16 at 09:29

Now you are using Jquery UI for drag and drop (sortable). I understand your issue. This may be a issue in Jquery UI that you are pointing out. So Instead of using this(Jquery UI), You could use the dragula.js for the drag and drop functionality. It has an awesome feature while placing the target element with its shadow.

Check here: http://bevacqua.github.io/dragula/

Jquery UI Sortable + Bootstrap variable height Divs sorting issue

1 Answers1