Response title
This is preview!
Sortable across columns?
in Using jQuery UI
•
15 years ago
I can sort across columns but when all sortable items in a column are
moved to another column you cannot move them back to the empty
column. Any insight?
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-
latest.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#container").sortable({
items: $(".sort"),
hoverClass: "sortHelper",
helper: "sortHelper",
handle: ".header"
});
$("#close").click(function() {
$("#p1 .pContent").toggle();
if ($("#p1 .closeEl").text() == "[+]") {
$("#p1 .closeEl").text("[-]");
} else {
$("#p1 .closeEl").text("[+]");
}
});
});
</script>
<style type="text/css">
.wrap {
width: 300px;
float: left;
}
.sortHelper{
border: 3px dashed #e0e0e0;
}
.sort {
background: #eee;
border: solid 1px #ddd;
margin: 15px;
width: 240px;
}
.header {
background: #999;
border-top: solid 1px #000;
}
</style>
</head>
<body>
<did id="container">
<div class="wrap">
col 1
<div id="sort1" class="sort">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
</div>
<div class="wrap">
col 2
<div id="sort2" class="sort">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
</div>
<div class="wrap">
col 3
<div id="sort3" class="sort">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
<div id="sort4" class="sort">
<div class="header">
header
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
</body>
</html>
