CootCraig/drag_drop_sortable.html

## drag_drop_sortable.html
<!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>
	<!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>