SaveAndRemove

by Shishir Max

HTML

<h1 class="ui-widget-header">Products</h1>
<div id="myAccordion">
  <h3><a href="#">T-Shirts</a></h3>
  <div>
    <ul>
      <li class="item"><span class="closer">x</span>Lolcat Shirt</li>
      <li class="item"><span class="closer">x</span>Cheezeburger Shirt</li>
      <li class="item"><span class="closer">x</span>Buckit Shirt</li>
    </ul>
  </div>
  <h3><a href="#">Bags</a></h3>
  <div>
    <ul>
      <li class="item"><span class="closer">x</span>Zebra Striped</li>
      <li class="item"><span class="closer">x</span>Black Leather</li>
      <li class="item"><span class="closer">x</span>Alligator Leather</li>
    </ul>
  </div>
  <h3><a href="#">Gadgets</a></h3>
  <div>
    <ul>
      <li class="item"><span class="closer">x</span>iPhone</li>
      <li class="item"><span class="closer">x</span>iPod</li>
      <li class="item"><span class="closer">x</span>iPad</li>
    </ul>
  </div>
</div>

<div class='proc'><pre>
<h6> </h6><br /></pre>
  <div class="projLeader">
  <label>Box1:</label>   
    <div class="ui-widget-content">
        <ol>
          <li class="placeholder" name="projLeader"></li>
          <input type="hidden" name="projLeader" class="hiddenListInput1" />
        </ol>    
    </div>
  </div>
</div>
<br/>

<input type="submit" id="savebutton" class="button" value="Save" onclick="userSubmitted = true;" />
<div id="output"></div>

CSS

body {
  font-family: verdana;
  font-size: 12px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}
ol{list-style-type: none;}
.item { height:20px; width: 180px; margin:5px; padding:5px; border:1px solid gray; background-color: #cd8; position: relative; }
.item .closer { position: absolute; right: 5px; top: 2px; font: bold 14px arial; color: #666; padding: 1px 3px; line-height: 1; cursor: pointer; display: none;}
.item .closer:hover { color: #000; }


.placeholder { height: 30px; width: 195px; margin: 5px; background: #eee; border: 1px dashed #999; }
.placeholder .item { margin: 0; }
ol .item .closer { display: block; }

.highlight { border: 1px solid red;  background: #fff; }
.highlight .item { opacity: 0.3; }

.ui-draggable-dragging { z-index: 99; opacity: 1 !important; }

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

JavaScript

var itm = [];
   $( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
   $("#myAccordion").accordion({heightStyle:"content", active: false, collapsible:true});
			$("#myAccordion li").draggable({
				appendTo: "body",
				helper: "clone", 
        				 refreshPositions: true,
				 start: function (event, ui) {
					//var name = $(this).closest('.item');
					sourceElement = $(this);
				},	 
			});
      
    $(".projLeader ol").droppable({ 
    tolerance: 'pointer', 
    hoverClass: 'highlight',
        drop: function(ev, ui)
        {
        sourceElement.css('color','red');
        	 var zz = ui.draggable.text()
	      	 var xyz = itm.includes(zz);
           if (xyz === false) 
           {
              var item = ui.draggable;
              if (!ui.draggable.closest('.placeholder').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
              //this.innerHTML = '';                                                        						// clean the placeholder
              item.addClass('dropClass').appendTo(this); 
              // append item to placeholder   
              //add to array
              itm.push(zz);
              var n = $(this).closest("div.proc").find(".dropClass").length;
              $(this).closest("div.proc").find("h6").text("Items Dropped: " + n + ".");
             
           }
           else 
           {
	        		alert('Name is Already Exist');
	      	 }

        }
    });
    $(".projLeader").on('click', '.closer', function(){
        var item = $(this).closest('.item');
        itm.splice(item);
        sourceElement.css('color','black');
        item.fadeTo(200, 0, function(){ item.remove(); })
    });
    
    		var LISTOBJ = {
			saveList: function() {
				var listCSV = "";
				$( ".projLeader li" ).each(function() {
					if (listCSV === "") {
						listCSV = $(this).text();
					} else {
						listCSV += ", " + $(this).text();
					}
         ...