SaveList

by Yevgeniy Bagatskii

HTML

<h1 class="ui-widget-header">Products</h1>
<div id="myAccordion">
  <h3><a href="#">T-Shirts</a></h3>
  <div>
    <ul>
      <li>Lolcat Shirt</li>
      <li>Cheezeburger Shirt</li>
      <li>Buckit Shirt</li>
    </ul>
  </div>
  <h3><a href="#">Bags</a></h3>
  <div>
    <ul>
      <li>Zebra Striped</li>
      <li>Black Leather</li>
      <li>Alligator Leather</li>
    </ul>
  </div>
  <h3><a href="#">Gadgets</a></h3>
  <div>
    <ul>
      <li>iPhone</li>
      <li>iPod</li>
      <li>iPad</li>
    </ul>
  </div>
</div>
<div class='proc'><pre>
<label>Process 1</label>
<span> </span><br /></pre>
  <div class="leader">
    <label>Box1:</label>
    <div class="ui-widget-content">
      <div class="projLeader">
        <ol>
          <li class="placeholder" name="leader"></li>
          <input type="hidden" name="leader" class="hiddenListInput1" />
        </ol>
      </div>
    </div>
  </div>
  <div class="checker">
    <label>Box2:</label>
    <div class="ui-widget-content">
      <div class="projChecker">
        <ol>
          <li class="placeholder" name="checker"></li>
          <input type="hidden" name="checker" class="hiddenListInput2" />
        </ol>
      </div>
    </div>
  </div>
</div>
<br/><br/><br/>
<div class='proc'>
 <label>Process 2</label>
  <span> </span>
  <br />
  <div class="leader">
    <label>Box1:</label>
    <div class="ui-widget-content">
      <div class="projLeader">
        <ol>
          <li class="placeholder" name="leader"></li>
          <input type="hidden" name="leader" class="hiddenListInput" />
        </ol>
      </div>
    </div>
  </div>
  <div class="checker">
    <label>Box2:</label>
    <div class="ui-widget-content">
      <div class="projChecker">
        <ol>
          <li class="placeholder" name="checker"></li>
          <input type="hidden" name="checker" class="hiddenListInput" />
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <input type="submit" id="savebutton"...

CSS

body {
  font-family: verdana;
  font-size: 12px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

li {
  margin: 5px;
  padding: 5px;
  width: 100px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.container {
  position: relative;
  float: left;
  width: 170px;
  border: 1px solid #ff0000;
  margin-right: 10px;
  min-height: 100px;
}

#memulinks {
  clear: both;
  display: block;
}

h4 {
  margin: 20px 0 0 0;
  font-size: 14px;
}

h4 span {
  font-weight: normal;
  font-size: 12px;
}

.ui-state-highlight {
  background: #000;
  height: 1px;
  padding: 0;
  border: none;
}

.proc {
  padding-top: 10px;
  display: inline-block;
}

.leader,
.checker {
  width: 200px;
  float: left;
  margin-top: 20px;
  margin-left: 10px;
}

.dropClass {
  background-color: lightblue;
  padding-left: 10px;
  width: 70px;
  border: 1px solid black;
  border-radius: 8px;
  margin-bottom: 5px;
}

JavaScript

$(function() {
	  var itm = [];
    $( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
	  $("#myAccordion").accordion({
	    heightStyle: "content",
	    active: false,
	    collapsible: true
	  });
	  $("#myAccordion li").draggable({
	    appendTo: "body",
	    helper: "clone"
	  });
	  $(".leader ol").droppable({
	    activeClass: "ui-state-default",
	    hoverClass: "ui-state-hover",
	    accept: ":not(.ui-sortable-helper)",
	    drop: function(event, ui) {
	      var zz = ui.draggable.text()
	      var xyz = itm.includes(zz);
	      if (xyz === false) {
	        $(this).find(".placeholder").remove();
	        $("<li></li>").text(ui.draggable.text())
	          //.addClass("cart-item")
	          .addClass('dropClass')
	          .appendTo(this);

	        //add to array
	        itm.push(zz);
	        //add style
	        $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
	        var n = $(this).closest("div.proc").find(".dropClass").length;
	        $(this).closest("div.proc").find("span").text("Items Dropped: " + n + ".");

	      } else {
	        alert('Name is Already Exist');
	      }

	    }
	  }).sortable({
	    items: "li:not(.placeholder)",
	    sort: function() {
	      $(this).removeClass("ui-state-default");
	    }
	  });
	  $(".checker ol").droppable({
	    activeClass: "ui-state-default",
	    hoverClass: "ui-state-hover",
	    accept: ":not(.ui-sortable-helper)",
	    drop: function(event, ui) {
	      var zz = ui.draggable.text()
	      var xyz = itm.includes(zz);
	      if (xyz === false) {
	        $(this).find(".placeholder").remove();
	        $("<li></li>").text(ui.draggable.text())
	          //.addClass("cart-item")
	          .addClass('dropClass')
	          .appendTo(this);

	        //add to array
	        itm.push(zz);
	        //add style
	        $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
	        var n =...