The Codesee The Codesee - 9 months ago 27
jQuery Question

Cant use jQuery's connectWith to join sortable div

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.

I have tried to use the
connectWith
function to allow the user to drag this popup div into the list of divs, however it doesn't move to fit inbetween them - instead, it stays over them. Could this have anything to do with the
z-index
?



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

$('#sortable1, #sortable2').sortable({
axis: 'y',
connectWith: '.first',
});

.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/

Here is the expected output (when you drag the div saying 'drag me', you can see that it goes in between the divs saying 'example') - this example doesn't use a popup:



$("#sortable1, #sortable2").sortable({
connectWith: ".first"
});

div.ex {
border: 1px solid;
padding: 5px;
}

<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" class="first">
<div class="ex">Example</div>
<div class="ex">Example</div>
<div class="ex">Example</div>
<div class="ex">Example</div>
</div>

<p>
Drag this div into the set above:
</p>

<div id="sortable2">
<div class="ex">drag me</div>
</div>





JsFiddle: https://jsfiddle.net/5ayf2yva/

Answer Source

I encountered similar problem a while ago. This is due to the position attribute you have applied to the popup. You should remove the position attribute from the popup css which is conflicting with the sortable or change the value to static. The sortable library does not work on absolutely positioned items.

.popup {
 width: 50%;
  left: 0;
  right: 0;
  top: 20%;
  margin: 0 auto;
  z-index: 1;
  background: #fff;
  border: 1px solid;
}

js fiddle