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..

WallEE · Accepted Answer · 2016-02-16 09:29:38Z

1

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/

answered Feb 16, 2016 at 9:29

WallEE

1071 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

Jquery UI Sortable + Bootstrap variable height Divs sorting issue

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