Categories
Mastering Development

I am working on a multi sortable app, with two sortable sections but having difficulties to make some elements sortable

Okay. So this is how it goes.. I have made four sortable columns (with a class name .sort), which has elements that can be sorted (with a class name .sortable) than inside .sortable I have placed elements (with a class name .sort-sortable). So I can drag/drop “.sort-sortable” inside “.sortable” and do the same with “.sortable” inside “.sort”. (I know this is becoming, tongue twister, mind twister roller coaster) Anyways the problem is for some evil reason I am able to drag/drop “.sort-sortable” inside “.sort” but than it gets stuck there and I cannot move it anywhere else. I have two questions:

A. Is there anyway I can restrict “.sort-sortable” to move to “.sort”?
B. Why “.sort-sortable” gets stuck? What am I doing Wrong

The Code:

$( function() {
$( ".sort" ).sortable({
	connectWith: ".sort, sortable",
	handle: ".head",
	cursor: 'Move',
});
$( ".sort" ).disableSelection();


$( ".sortable" ).sortable({
	connectWith: ".sortable, .sort",
	cancel:".head"
});
$( ".sortable" ).disableSelection();

} );
.sort {
	display:block;
	width:23%;
	float:left;
	margin:20px 1%;
	padding:10px;
	box-sizing:border-box;
	background:#bfe0ff;
	min-height:800px
}
.sortable {
	min-height:350px;
	width:100%;
	box-sizing:border-box;
	padding:10px;
	background:#bbb;
	margin:0 0 20px 0;
}
.sortable .head {
	padding:20px;
	text-align:center;
	background:#7F7F7F;
	color:#fff;
	font-weight:bold;
	margin:0 0 20px 0;
}
.sortable .sortable {
	background:#ffbbbc;
}
.sort-sortable {
	min-height:100px;
	width:100%;
	box-sizing:border-box;
	padding:10px;
	background:#333;
	margin:0 0 20px 0;
}
<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 class="sort">
  <div class="sortable">
    <div class="head">Drag Me Please!</div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
  </div>
</div>
<div class="sort">
  <div class="sortable">
    <div class="head">Drag Me Please!</div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
  </div>
</div>
<div class="sort"> </div>
<div class="sort">
  <div class="sortable">
    <div class="head">Drag Me Please!</div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
  </div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *