Javascript 如何防止在特定位置/区域放置被拖动的项目？

在这里，我已经在表格单元格上实现了拖放功能，它可以很好地进行拖放，但是如果已经有一个元素，则无法显示任何预防消息或在拖放元素上显示circuler curson，意味着在某些单元格中，我有一个

标记，这只是我在拖放，其余的单元格是空的，这意味着没有

标记，我在拖放

，在没有

的任何剩余空单元格中，我的html如下所示

---

您需要检查尝试删除单元格的单元格的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");
                    }

                }
                ;

            });
        })

---

实际上，我忘记了有问题的尺寸标注，如果元素已经存在，代码不会让该元素掉落，我想做的就是在光标上显示一些消息或黑色圆圈，如果我们试图将事件放置在错误的目的地，那么您可以在if块中使用一些通知/警报我尝试了一些方法，但没有一种有效，比如检查类，比较Id，但不起作用，我尝试了if（$（this.nestest（'td'）.hasglass（'booked'））{alert（“您不能在这里删除此元素”）；}else{$（this.nestest（'td'）.removeClass（'alertShow'））$（this）.closest（'td'）.addClass（'booked”）；}通过简单地在我的原始代码上放置else条件，解决了这个问题

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");
                    }

                }
                ;

            });
        })

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

      });