ループ内で2つの異なるドロップ可能領域にアイテムをドロップできるようにする

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>