Question

这里我已经在表格单元格上实现了拖放功能，它可以正常拖放，但是如果已经有一个元素，则无法显示任何预防信息或者删除元素的循环器游标，意味着一些单元格我有一个标签，只是拖放而其余的单元格都是空的意味着没有标签，并拖放任何一个其余的空单元格中没有，我的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");
                 }
           };

      });

如何防止在特定的地方/区域删除拖动的项目？

2 个答案: