如何防止在特定地點/區域拖放拖動項目？

Question

在這裏，我已經實現了表格單元格的拖放功能，它可以正常拖放操作，但是無法顯示任何預防消息或在下拉元素上顯示任何預防性消息，如果已經有一個元素，意味着在某些細胞我有一個<span></span>標記，這只是拖放和其他細胞是空的意味着沒有<span></span>標記，並拖動和下降<span></span>在任何其他沒有<span></span>的空單元格，我的HTML是波紋管 This is the Output Snapp

<table border="1" class="display nowrap dataTable dtr-inline" id="example"> 
     <thead> 
      <tr><th>Column Header</th><th>Head1</th><th>Head2</th<th>Head3</th><th>Head4</th><th>Head5</th></tr> 
    </thead> 
     <tbody> 
     <tr> 
      <td class="name" id="1_undefined">Head1</td><td class="alertShow" id="1_0"></td><td class="alertShow" id="1_1"></td><td class="alertShow" id="1_2"></td><td class="alertShow" id="1_3"></td><td class="alertShow" id="1_4"></td> 
     </tr> 
     <tr> 
     <td class="name" id="2_10">Head2</td><td class="alertShow" id="2_1"></td><td class="displaydata"><span id="id_2_2" class="booked" draggable="true"></span></td><td class="alertShow" id="2_3"></td><td class="alertShow"><span id="id_2_4" class="booked" draggable="true"></span></td> 
     </tr> 
     <tr> 
    <td class="name" id="3_10">Room3</td><td class="alertShow" id="3_0"></td><td class="alertShow" id="3_1"></td><td class="alertShow" id="3_2"></td><td class="alertShow" id="3_3"></td><td class="alertShow" id="3_4"></td> 
     </tr> 
    </tbody> 
    </table> 

，這是我的腳本代碼此代碼不允許下降重複元素，而是想表明一些preventon消息，我不能夠做到這一點

$('.booked').on("dragstart", function (event) { 
      $(this).closest('td').removeClass("displaydata") 
      $(this).closest('td').addClass("alertShow") 
      var dt = event.originalEvent.dataTransfer; 
      dt.setData('Text', $(this).attr('id'));   
     }); 

     $('table td').on("dragenter dragover drop", function (event) { 
      event.preventDefault(); 
      if (event.type === 'drop') { 
       var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id')); 
       if($(this).find('span').length===0){ 
        var de=$('#'+data).detach(); 
        de.appendTo($(this)); 
         $(this).closest('td').removeClass("alertShow"); 
         $(this).closest('td').addClass("booked");      
       } 

      }; 

     }); 

Answer 1

你需要檢查細胞的innerHTML在你試圖做的下降細胞

if ($(this).html() === '') { 
//apped content 
} 

下面是完整的代碼

$(document).ready(function() { 
      $('.booked').on("dragstart", function (event) { 
       $(this).closest('td').removeClass("displaydata") 
       $(this).closest('td').addClass("alertShow") 
       var dt = event.originalEvent.dataTransfer; 
       dt.setData('Text', $(this).attr('id')); 
      }); 

      $('table td').on("dragenter dragover drop", function (event) { 
       event.preventDefault(); 
       if (event.type === 'drop') { 
        var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id')); 
        if ($(this).html() === '') { 
         var de = $('#' + data).detach(); 
         de.appendTo($(this)); 
         $(this).closest('td').removeClass("alertShow"); 
         $(this).closest('td').addClass("booked"); 
        } 

       } 
       ; 

      }); 
     }) 

Answer 2

 $('.booked').on("dragstart", function (event) { 
       $(this).closest('td').removeClass("displaydata") 
       $(this).closest('td').addClass("alertShow") 
       var dt = event.originalEvent.dataTransfer; 
       dt.setData('Text', $(this).attr('id'));   
      }); 

     $('table td').on("dragenter dragover drop", function (event) { 
      event.preventDefault(); 
      if (event.type === 'drop') { 
      var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id')); 
       if($(this).find('span').length===0){ 
        var de=$('#'+data).detach(); 
        de.appendTo($(this)); 
        $(this).closest('td').removeClass("alertShow"); 
        $(this).closest('td').addClass("booked");      
       } 
      else{ 
        alert("You can not Put this item here"); 
       } 
      }; 

     });