拒绝拖放到表格的第一个子单元格

Question

我想拒绝用户将蓝色字段放入第一列。

我找到了一个样本并重新设计了一下，以明确我想要做的事情......

$(document).ready(function() {
  $('.event').on("dragstart", function(event) {
    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'));
      de = $('#' + data).detach();
      de.appendTo($(this));
    };
  });
})

table th,
table td {
  height: 30px;
  width: 200px;
}

table span {
  display: block;
  background-color: #09C;
  height: 30px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="#our_table" border="1" cellspacing=0>
  <tr>
    <th>Deny Drop on this column</th>
    <th>Used</th>
    <th>Available</th>
  </tr>
  <tr>
    <td>Firstname</td>
    <td></td>
    <td rowspan=5>
      <span class="event" id="a" draggable="true">Firstname</span>
      <span class="event" id="b" draggable="true">Lastname</span>
      <span class="event" id="c" draggable="true">Street</span>
      <span class="event" id="d" draggable="true">Age</span>
      <span class="event" id="e" draggable="true">Country</span>
      <span class="event" id="f" draggable="true">Nickname</span>
      <span class="event" id="g" draggable="true">Phone</span>
    </td>
  </tr>
  <tr>
    <td>Lastname</td>
    <td></td>
  </tr>
  <tr>
    <td>Street</td>
    <td></td>
  </tr>
  <tr>
    <td>Zipcode</td>
    <td></td>
  </tr>
  <tr>
    <td>City</td>
    <td></td>
  </tr>
</table>

可能我使用的代码不是最好的，所以我可以接受一些更好的解决方案：）

我想知道是否可以拒绝拖放功能到桌子的第一个单元格？

Answer 1

制作此选择器$('table tr td:not(:first-child)')

$(document).ready(function() {
  $('.event').on("dragstart", function(event) {
    var dt = event.originalEvent.dataTransfer;
    dt.setData('Text', $(this).attr('id'));
  });
  $('table tr td:not(:first-child)').on("dragenter dragover drop", function(event) {
    event.preventDefault();
    if (event.type === 'drop') {
      var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
      de = $('#' + data).detach();
      de.appendTo($(this));
    };
  });
})

table th,
table td {
  height: 30px;
  width: 200px;
}

table span {
  display: block;
  background-color: #09C;
  height: 30px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="#our_table" border="1" cellspacing=0>
  <tr>
    <th></th>
    <th>Used</th>
    <th>Available</th>
  </tr>
  <tr>
    <td>Firstname</td>
    <td></td>
    <td rowspan=5>
      <span class="event" id="a" draggable="true">Firstname</span>
      <span class="event" id="b" draggable="true">Lastname</span>
      <span class="event" id="c" draggable="true">Street</span>
      <span class="event" id="d" draggable="true">Age</span>
      <span class="event" id="e" draggable="true">Country</span>
      <span class="event" id="f" draggable="true">Nickname</span>
      <span class="event" id="g" draggable="true">Phone</span>
    </td>
  </tr>
  <tr>
    <td>Lastname</td>
    <td></td>
  </tr>
  <tr>
    <td>Street</td>
    <td></td>
  </tr>
  <tr>
    <td>Zipcode</td>
    <td></td>
  </tr>
  <tr>
    <td>City</td>
    <td></td>
  </tr>
</table>

Answer 2

您可以检查td is()是否是第一个孩子：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.event').on("dragstart", function(event) {
    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' && !$(this).is( "td:first-child" )) {
      var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
      de = $('#' + data).detach();
      de.appendTo($(this));
    };
  });
})

＆＃13;

table th,
table td {
  height: 30px;
  width: 200px;
}

table span {
  display: block;
  background-color: #09C;
  height: 30px;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="#our_table" border="1" cellspacing=0>
  <tr>
    <th></th>
    <th>Used</th>
    <th>Available</th>
  </tr>
  <tr>
    <td>Firstname</td>
    <td></td>
    <td rowspan=5>
      <span class="event" id="a" draggable="true">Firstname</span>
      <span class="event" id="b" draggable="true">Lastname</span>
      <span class="event" id="c" draggable="true">Street</span>
      <span class="event" id="d" draggable="true">Age</span>
      <span class="event" id="e" draggable="true">Country</span>
      <span class="event" id="f" draggable="true">Nickname</span>
      <span class="event" id="g" draggable="true">Phone</span>
    </td>
  </tr>
  <tr>
    <td>Lastname</td>
    <td></td>
  </tr>
  <tr>
    <td>Street</td>
    <td></td>
  </tr>
  <tr>
    <td>Zipcode</td>
    <td></td>
  </tr>
  <tr>
    <td>City</td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;