CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-ui-sortable
The Codesee
The Codesee

Reputation: 3783

jQuery sortable - set which divs are contained in their parent container

I am using jQuery's sortable function to allow the user to rearrange the order of divs. When the user clicks the button, a popup div appears.

Currently, the "already there divs" and the "popup div" cannot be moved out of their container due to the line containment: 'parent'

How do I allow the popup div to be moved out of its container, just not the divs which are already there?

$("#click").on("click", function() {
  $("#sortable1").show();
});

$('#sortable1, #sortable2').sortable({
  axis: 'y',
  connectWith: '.first',
  containment: 'parent'
});
.container {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 13%;
  width: 85%;
}

div.div {
  border: 1px solid;
  margin-top: 7.5px;
  margin-bottom: 7.5px;
}

.popup {
  width: 50%;
  left: 0;
  right: 0;
  top: 20%;
  margin: 0 auto;
  z-index: 1;
  position: absolute;
  background: #fff;
  border: 1px solid;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="sortable1" style="display: none;">
  <div class="popup">
    <h2>RED</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, former black-ops agent Frank Moses reassembles his old team in a last ditch effort to survive and uncover his assailants.</p>
  </div>
</div>

<div class="container">

  <button id="click">Click me</button>
  <br>
  <br>

  <div id="sortable2" class="first">

    <div class="div">
      <h2>Deep Impact</h2>
      <p>Unless a comet can be destroyed before colliding with Earth, only those allowed into shelters will survive. Which people will survive?</p>
    </div>

    <div class="div">
      <h2>The Adjustment Bureau</h2>
      <p>The affair between a politician and a contemporary dancer is affected by mysterious forces keeping the lovers apart.</p>
    </div>

    <div class="div">
      <h2>Lord of the Flies</h2>
      <p>Stranded on an island, a group of schoolboys degenerate into savagery.</p>
    </div>
  </div>

</div>

JsFiddle: https://jsfiddle.net/o0exme4f/1/

Upvotes: 0

Views: 746

Answers (1)

Twisty
Twisty

Reputation: 30893

This will not work the way you are expecting.

Take a look here: https://jsfiddle.net/o0exme4f/2/

JavaScript

$(function() {
  $("#click").on("click", function() {
    $("#sortable1").show();
  });

  $("#sortable2").sortable({
    axis: 'y',
    containment: 'parent',
    items: "> div",
    update: function(e, ui) {},
    receive: function(e, ui) {
      console.log("Receiving item: ", ui.item);
      ui.item.attr("style", "").removeClass("popup").addClass("div");
    }
  });
  $("#sortable1").sortable({
    connectWith: '.first'
  });
});

When the new item is received, it is updated to be like the other items. Some of the styling was causing it not flow well with the other elements.

Upvotes: 1

Related Questions