Sortable Advance Updation

Sortable for theme builder

by Jithin Raj P R

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<p>You can't paste view to select</p>
<ul id="dropable">
  <li class="view">Item View 1</li>
  <li class="view">Item View 2</li>
  <li class="view">Item View 3</li>
</ul>
<ul id="selectable">
  <li>Select Item 1</li>
  <li>Select Item 2</li>
  <li>Select Item 3</li>
</ul>

CSS

body {
  font-family: Arial, Tahoma, San-Serif;
  font-size: 11px;
}

p {
  margin: 0 0 20px;
}

ul {
  float: left;
  margin: 0 20px 0 0;
  width: 100px;
  list-style: none;
}

li {
  background: #fff;
  border: solid 1px #ccc;
  padding: 10px;
}

#selectable .place_sortlet {
  padding: 0px;
  border: none;
}

JavaScript

$(function() {
  var check = true,
    ulN = 0;

  $('#dropable').sortable({
    tolerance: "pointer",
    placeholder: 'place_sortlet'
  });

  $('#selectable').sortable({
    connectWith: '#dropable',
    tolerance: "pointer",
    placeholder: 'place_sortlet',
    start: function(event, ui) {
      check = true;
      ulN = ui.item.index() + 1;
      console.log($(ui.item));
      $('.place_sortlet').replaceWith(ui.item.clone().attr('style', '').addClass('clone'));
    },
    remove: function(e, ui) {
      check = false;
    },
    stop: function(event, ui) {
      if (check == true) {
        console.log('1');
        $(this).sortable('cancel');
        $('.clone').remove();
      } else {
        console.log('2');
        $('.clone').removeClass('clone');
        ui.item.addClass('view');
      }
    }
  });

});