拒绝拖放到tabel的第一个孩子单元

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()第一胎：

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

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>