Yevgeniy Bagackiy Yevgeniy Bagackiy - 19 days ago 5
jQuery Question

Allow user to drop item in two different droppable areas inside loop

So I do have a loop of droppable areas where user is able to drop items. Size of the loop can be different. It depends on user's input. You can check fiddle here
Here is my droppable area:

$(".projLeader ol").droppable({
tolerance: 'pointer',
hoverClass: 'highlight',
drop: function(ev, ui)
{
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');
}

}
});


The problem is I got warning message for each field. For example if I drop item in box1 and then want to drop same item in box2 I got warning message. How can I fix it? Thanks for any help

Answer

I spent some time understanding your code and here's the solution. I added some code to detect if an existing box already exists.Hope it helps :)!

var itm = [];
   $( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
   $("#myAccordion").accordion({heightStyle:"content", active: false, collapsible:true});
            $("#myAccordion li").draggable({
                appendTo: "body",
                helper: "clone", 
        start: function(ev, ui){ ui.helper.width($(this).width()); } 
            });
      
    $(".projLeader ol").droppable({ 
    tolerance: 'pointer', 
    hoverClass: 'highlight',
        drop: function(ev, ui)
        {
             var zz = ui.draggable.text()
             var xyz = itm.includes(zz);
           if (xyz === false) 
           {
              var item = ui.draggable;
              var map = {}, i , size;
              var flag = false;

              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
              var n = $(this).closest("div.proc").find(".dropClass").length;
              $(this).closest("div.proc").find("h6").text("Items Dropped: " + n + ".");
              var listOfElements = $(this).closest("div.proc").find("li").text();
              var newarr =  listOfElements.split('x');
              newarr.shift();
              var actualArrayLength = newarr.length; 
              for (i = 0, size = newarr.length; i < size; i++){
                if (map[newarr[i]]){
                xyz = true;
                alert("Name is Already Exist");
                $(this).closest("div.proc").find("li:last-child").remove();
                return false;
                }   
                else{
                  map[newarr[i]] = true;
                  newarr[newarr.length - 1];
                }           
              }

             }
           }        
        }
    });
    $(".projLeader").on('click', '.closer', function(){
        var item = $(this).closest('.item');
        itm.splice(item);
        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();
                    }
          $("#output").text(listCSV);
                    $(".hiddenListInput").val(listCSV);
                });
            }
        }
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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 id = "ID1">
          <li class="placeholder" name="projLeader"></li>
          <input type="hidden" name="projLeader" class="hiddenListInput1" />
        </ol>    
    </div>
  </div>
</div>
<div class='proc'><pre>
<h6> </h6><br /></pre>
  <div class="projLeader">
  <label>Box2:</label>   
    <div class="ui-widget-content">
        <ol id = "ID2" >
          <li class="placeholder" name="projLeader"></li>
          <input type="hidden" name="projLeader" class="hiddenListInput2" />
        </ol>    
    </div>
  </div>
</div>
<br/>

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

Comments