javascript - 如何防止在特定位置/区域丢弃拖动的项目？

Question

在这里，我在表格单元格上实现了拖放功能，它可以很好地拖放，但我无法显示任何预防消息，或者如果已经有一个元素，则在放置元素时无法显示 circuler curson，这意味着我有一些细胞 <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>

这是我的脚本代码，此代码不允许删除重复元素，但想显示一些预防消息，但我无法做到这一点

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

                }
                ;

            });
        })