Skip to content

Instantly share code, notes, and snippets.

@CootCraig
Last active August 29, 2015 14:01
Show Gist options
  • Save CootCraig/debe3c35be4863fff1ad to your computer and use it in GitHub Desktop.
Save CootCraig/debe3c35be4863fff1ad to your computer and use it in GitHub Desktop.
Demonstrate drag and drop between ul using JQuery Sortable.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DragDropDemo</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<h1>Sortable - Drag and Drop Demo</h1>
<p>
Drag items between Chosen and Not Chosen.
</p>
<p>
Each of the items will be Chosen or Not Chosen.
</p>
<div id="unchosen_div">
<h2>Not Chosen</h2>
<ul id="unchosen_list" class="keyed_item_list" >
<li class="keyed_item" data-key="1">item 1</li>
<li class="keyed_item" data-key="2">item 2</li>
<li class="keyed_item" data-key="3">item 3</li>
<li class="keyed_item" data-key="4">item 4</li>
<li class="keyed_item" data-key="5">item 5</li>
</ul>
</div>
<div id="chosen_div">
<h2>Chosen</h2>
<ul id="chosen_list" class="keyed_item_list" >
<li class="keyed_item" data-key="6">item 6</li>
<li class="keyed_item" data-key="7">item 7</li>
</ul>
</div>
<div>
<p class="unchosen_log"></p>
<p class="chosen_log"></p>
</div>
<script>
$(document).ready(function(){
var log_chosen = null;
log_chosen = function() {
var log_txt = "";
$("p.unchosen_log, p.chosen_log").empty();
log_txt = "Unchosen:";
$("ul#unchosen_list li").each(function(index,list_item){
log_txt += " " + $(this).text() + ", ";
});
$("p.unchosen_log").text(log_txt);
log_txt = "Chosen:";
$("ul#chosen_list li").each(function(index,list_item){
log_txt += " " + $(this).text() + ", ";
});
$("p.chosen_log").text(log_txt);
};
log_chosen();
$("ul.keyed_item_list").sortable({
connectWith: "ul.keyed_item_list",
stop: function(event,ui){
log_chosen();
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment