Swapping two divs using jQuery sortable

Question

I have multiple connectedSortable sections, each div has one div.widget inside of it, as following :

<div class="row">
        <section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
            <div class="widget">Widget 1</div>
        </section>

        <section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
            <div class="widget">Widget 2</div>
        </section>

        <section class="col-xs-4 col-sm-4 col-md-4 col-lg-4 connectedSortable">
     <div class="widget">Widget 3</div>
        </section>
    </div>
    <div class="row">
        <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
      <div class="widget">Widget 4</div>
        </section>

        <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
      <div class="widget">Widget 5</div>
        </section>

        <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
      <div class="widget">Widget 6</div>
        </section>

        <section class="col-xs-3 col-sm-3 col-md-3 col-lg-3 connectedSortable">
      <div class="widget">Widget 7</div>
        </section>
    </div>

Using the sortable jQuery plugin, it will insert the dragged div into connectedSortable section instead of swapping.

What I want to do is instead of inserting that div inside connectedSortable section, I want to swap it with the div which is inside that connectedSortable section.

And when a connectedSortable section has no div.widget inside of it, I can drop only one div.widget and nothing to be swapped since it's already empty.

How can I do that ?

This is a jsfiddle of what I tried : http://jsfiddle.net/pus4aff6/

Why are you using [Sortable](https://jqueryui.com/sortable/)? If I understood right you want to swap widgets, no the containers, so what you need is to make the widgets [droppable](https://jqueryui.com/droppable/) and check if the target is empty... if not then swap content, which will be to appending ([appendTo](http://api.jquery.com/appendto/)) the preexisting widget to the origin of the dropped widget. — DIEGO CARRASCAL, Feb 16 '17 at 14:23
To swap the items, you could use this answer: http://stackoverflow.com/questions/2263687/jquery-sortable-obtain-2-elements-being-swapped — Fabian Horlacher, Feb 17 '17 at 16:01

Fabian Horlacher · Answer 1 · 2017-02-16T15:42:08.300

I would not use the bootstrap rows for this widget but create my own grid based on the jQuery UI Sortable description with css flexbox.

$( function() {
  $( "ul" ).sortable().disableSelection();
} );

ul{
  list-style-type: none; /* remove bullets */
  display: flex; /* flexbox */
  flex-wrap: wrap; /* multiple lines */
  align-items: stretch;
}
li{
  flex-grow: 1; /* stretch box width */
  width: 20vw;  /* 20vw is 20% of the browser width, you can replace it with an absolute value */
  min-height:50px;
  cursor:move;
}
/* remove margin & padding for this demo */
body, ul{
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

<ul>
  <li class="ui-state-default">Widget 1</li>
  <li class="ui-state-default">Widget 2</li>
  <li class="ui-state-default">Widget 3</li>
  <li class="ui-state-default">Widget 4</li>
  <li class="ui-state-default">Widget 5</li>
  <li class="ui-state-default">Widget 6</li>
  <li class="ui-state-default">Widget 7</li>
  <li class="ui-state-default">Widget 8</li>
  <li class="ui-state-default">Widget 9</li>
  <li class="ui-state-default">Widget 10</li>
  <li class="ui-state-default">Widget 11</li>
</ul>

Remove the classes ui-state-default to use your own design instead of jQuery UI.

I'm sorry but this is just a regular sortable list, as you see I have a set of `connectedSortable` divs, so each connected `connectedSortable` should only contains one element at a time. — Renaud is Not Bill Gates, Feb 17 '17 at 09:29
That's true, I've removed the bootstrap elements with their `connectedSortable` class. — Fabian Horlacher, Feb 17 '17 at 16:00

score 1 · Accepted Answer · answered Feb 17 '17 at 11:46

I created a solution where I worked with the start and the receive events as following :

start: function(event, ui){
                        ui.item.startPos = ui.item.index();
                    },
                    receive: function(event, ui) {
                        var source = ui.sender;
                        var target = $(this);
                        var draggedItem = ui.item;
                        if(target.attr('id') !== 'widgets-container'){
                            if(target.find('div.widget').length >= 2){
                                if(source.is('#widgets-container')){
                                    draggedItem.remove();
                                    if(ui.item.startPos === 0) {
                                        source.prepend(draggedItem);
                                    }else{
                                        source.children().eq(ui.item.startPos-1).after(draggedItem);
                                    }
                                }else{
                                    var elementToSwap = target.find('div.widget').not(draggedItem)[0];
                                    source.html(elementToSwap);
                                }
                            }
                        }   
                    }

Here the update jsfiddle : http://jsfiddle.net/frgj5qmm/

Swapping two divs using jQuery sortable

2 Answers2