允許用戶將物品放入循環內的兩個不同可放置區域

Question

因此，我確實有一個用戶可以放置物品的可放置區域循環。循環的大小可以不同。這取決於用戶的輸入。您可以檢查fiddle here 這裏是我的可投放區域：

$(".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'); 
     } 

    } 
}); 

問題是，我得到了警告信息的每個字段。例如，如果我將項目放入box1中，然後想要放入box2中的相同項目，則會收到警告消息。我該如何解決它？感謝您的任何幫助

Answer 1

我花了一些時間瞭解您的代碼，這裏的解決方案。我添加了一些代碼來檢測現有的盒子是否已經存在。希望它有助於:)！

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("h6").text("Items Dropped: " + (n - 1) + "."); 
 
       $(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>