SaveList

by bizamajig

HTML

<h1 class="ui-widget-header">Products</h1>
<div id="myAccordion">
  <h3><a href="#">A</a></h3>
  <div>
    <ul>
      <li>aaronjames </li>
      <li>adelyn</li>
      <li>acol</li>
    </ul>
  </div>
  <h3><a href="#">B</a></h3>
  <div>
    <ul>
      <li>benny</li>
      <li>bryanooi</li>
      <li>bon</li>
    </ul>
  </div>
  <h3><a href="#">C</a></h3>
  <div>
    <ul>
      <li>candy</li>
      <li>catty</li>
      <li>cjee</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" style="margin-top:25px;" name="submit" class="button" value="Save"...

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;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: red !important;
    }
    
    h3 a{
          color:#fff !important;
}

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');
	      }

	    },
      out:function(event, ui){
      count= count-1;
       $( this )
          .addClass( "ui-state-highlight" )
          .find( ".myAccordion" )
            .html( "Out!" );
            $(this).closest("div.proc").find("span").text("Items Dropped: " + n + ".");
      }
	  }).sortable({
	    items: "li:not(.placeholder)",
	    sort: function() {
	      $(this).removeClass("ui-state-default");
        $(ui.item).css("background", "red");
	    }
	  });
	  $(".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();
	       ...