CODEWITHSUNDEEP
jqueryjquery-ui-sortable
user2204356
user2204356

Reputation: 45

jQuery sortable lists to exact position/place

Is it possible with jQuery sortable to make 2 lists, one source and one destination list. I would like to move items from source list to exact position to destination list. For example, source list has 10 items, destination list is empty but has 10 places. Then, I want to drag and drop item from source list to target list on position 4.

Maybe this image illustrate this better: enter image description here

Thank you!

$(document).ready(function() {
  $("#source, #target").sortable({
    connectWith: ".connectList",
  }).disableSelection();

});
ul li {
  background-color: #d6d3d3;
  margin: 5px;
  padding: 5px; 
  width: 100px;
  height: 20px;
}

#source {
  float: left;
  list-style:  none;
}

#target {
  float: left;
  list-style: none;
}
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul class="sortable-list connectList" id="source">
  <li class="warning-element">
    First
  </li>
  <li class="success-element">
    Second
  </li>
  <li class="info-element">
    Third
  </li>
  <li class="danger-element">
    Fourth
  </li>
</ul>

<ul class="sortable-list connectList" id="target">
  <li class="success-element">
    One
  </li>
</ul>

Upvotes: 1

Views: 188

Answers (1)

Frenchy
Frenchy

Reputation: 17007

Its not the complete solution, but you could begin with that:

$(document).ready(function() {

  $("#target li").remove();
  $("#source li").clone().appendTo("#target");
  $("#target li").text("").addClass("empty");

  $("#source li").draggable({
    revert: "invalid",
    appendTo: 'body',
    helper: function(ev, ui) {
      return "<span class='helperPick'>" + $(this).html() + "</span>";
    },
    start: function(ev, ui) {
      ui.helper.width($(this).width());
    } // ensure helper width
  });

  $("#target .empty").droppable({
    tolerance: 'pointer',
    hoverClass: 'highlight',
    drop: function(ev, ui) {
      var item = ui.draggable;
      if (!ui.draggable.closest('.empty').length) item = item.clone().draggable(); // if item was dragged from the source list - clone it
      this.innerHTML = ''; // clean the placeholder
      item.css({
        top: -10,//to substract margin and pading
        left: -10
      }).appendTo(this); // append item to placeholder
    }
  });

/*
    $("#source, #target").sortable({
      connectWith: ".connectList",
    }).disableSelection();
*/
});
ul li {
  background-color: #d6d3d3;
  margin: 5px;
  padding: 5px;
  width: 100px;
  height: 20px;
}

#source {
  float: left;
  list-style: none;
}

#target {
  float: left;
  list-style: none;
}

.empty {
  width: 100px;
  height: 18px;
  margin: 5px;
  padding: 5px;
  background: #eee;
  border: 1px dashed #999;
}

.empty .item {
  margin: 0;
}

.empty .item .closer {
  display: block;
}

.helperPick {border:1px dashed red; height:20px; line-height:20px; text-align:center; width:120px}
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul class="sortable-list connectList" id="source">
  <li class="warning-element">
    First
  </li>
  <li class="success-element">
    Second
  </li>
  <li class="info-element">
    Third
  </li>
  <li class="danger-element">
    Fourth
  </li>
</ul>

<ul class="sortable-list connectList" id="target">
  <li class="success-element">
    One
  </li>
</ul>

Upvotes: 1

Related Questions