draggable div set

by lemon kazi

HTML

<div class="social-msl-col-links">

  <section class="social-msl-group">

    <div class="social-msl-group-title social-msl-group-top">
      <h3>Drag these icons</h3>
    </div>
    <div class="social-msl-group-list">
      <ul>
        <li class="draggable">
          <label>
            <div class="social-msl-link-label-wrap">
              <div class="social-msl-link-label" id="link1">
                <span class="social-icon"><i class="fa fa-facebook"></i></span> <span class="social-title">Facebook</span>
              </div>
            </div>
          </label>
        </li>
        <li class="draggable">
          <label>
            <div class="social-msl-link-label-wrap">
              <div class="social-msl-link-label" id="link2">
                <span class="social-icon"><i class="fa fa-twitter"></i></span> <span class="social-title">Twitter</span>
              </div>
            </div>
          </label>
        </li>
        <li class="draggable">
          <label>
            <div class="social-msl-link-label-wrap">
              <div class="social-msl-link-label" id="link3">
                <span class="social-icon"><i class="fa fa-pinterest"></i></span> <span class="social-title">Pinterest</span>
              </div>
            </div>
          </label>
        </li>
        <li class="draggable">
          <label>
            <div class="social-msl-link-label-wrap">
              <div class="social-msl-link-label" id="link4">
                <span class="social-icon"><i class="fa fa-google-plus"></i></span> <span class="social-title">Google+</span>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </section>

</div>

<div class="social-msl-col-details">

  <div class="social-msl-links-order-wrap">
    <div class="social-msl-links-order">
      <h3>Drop here in preferred order</h3>
      <ul>
        <li class="social-msl-drop"></li>
        <li class="social-msl-drop"></li>
        <li...

CSS

h3 {
  font-size: 1rem;
}

.social-msl-col-links {
  float: left;
  width: 40%;
}

.social-msl-group .social-msl-group-list .social-msl-link-label-wrap {
  padding: 0 1rem 0 0;
}

.social-msl-group .social-msl-group-list .social-msl-link-label-wrap .social-msl-link-label {
  padding: 0.5rem;
  cursor: move;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.social-msl-group .social-msl-group-list .social-msl-link-label-wrap .social-msl-link-label:hover {
  background: #fff;
}

.social-msl-col-details {
  float: left;
  width: 60%;
}

.social-msl-col-details .social-msl-links-order-wrap .social-msl-links-order {
  background: #ddd;
  padding: 1rem;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.social-msl-col-details .social-msl-links-order-wrap .social-msl-links-order h3 {
  padding: 0;
  margin: 0;
}

.social-msl-col-details .social-msl-links-order-wrap .social-msl-links-order ul li {
  display: block;
  width: 2rem;
  height: 2rem;
  border: 1px dashed #bbb;
  float: left;
  margin: 0 0.5rem 0.5rem 0;
  overflow: hidden;
}

.social-msl-col-details .social-msl-links-order-wrap .social-msl-links-order ul li:hover {
  background: #fff;
}

.social-msl-add {
  cursor: pointer;
}

.clear {
  clear: both;
}

JavaScript

$(".social-msl-link-label").draggable({
  connectToSortable: ".social-msl-group-list",
  revert: "invalid",
  helper: "clone"
});

var orderMSLids = [];
var droppableOptions = {
  accept: ".social-msl-link-label",
  tolerance: 'pointer',
  greedy: true,
  hoverClass: 'highlight',
  drop: function(ev, ui) {
    orderMSLids = [];
    $(ui.draggable).clone(true).detach().css({
      position: 'relative',
      top: 'auto',
      left: 'auto'
    }).appendTo(this);


    orderMSLids.push($(this).find('.social-msl-link-label').attr('id'));

    $(this).siblings().filter(function() {
      return $(this).text().trim() === $(ui.draggable).text().trim();
    }).empty();

    // edited
    str = [];
    $(".social-msl-links-order li").each(function(index) {
      //console.log( index + ": " + $( this ).children().attr('id') );
      var res = $(this).children().attr('id');
      if (res) {
        str.push(res);
      }
    });

    var string = str.join(",");
    $('#msl-order').val(string);


  }
};
$(".social-msl-links-order li.social-msl-drop").droppable(droppableOptions);

$('.social-msl-add').click(function() {
  var $droppable = $('<li class="social-msl-drop"></li>').droppable(droppableOptions);
  $droppable.insertBefore('.social-msl-add');
});
$('#msl-order').prop('value').split(',').forEach(function(id) {
  var $droppable = $('.social-msl-drop.ui-droppable:empty').first();
  if (id) {
    $('.draggable #' + id).clone(true).appendTo($droppable);
  }
});