I have two tables in a below Div. Out of that, I would like to prevent drag and drop functionality on one table and other should have drag and drop functionality.
I was able to successfully stop drag and drop on Div level (please see working code, I found this code from Disable Drag and Drop on HTML elements?) However when I tried to assign similar code to specific table, it does not work and I am able to perform drag and drop on those tables.
HTML:
<div class="test">
<table id="s_1" summary="Table 1" > </table>
<table id="s_2" summary="Table 2" > </table>
</div>
Java Script:
Working:
/* drag and drop */
$('.test').bind("dragover", function(e) {
e.preventDefault();
return false;
});
$('.test').bind("drop", function(e){
e.preventDefault();
return false;
});
Not Working:
$('.test table').each(function(){
console.log($(this).attr("summary"));
if ($(this).attr("summary") == "Table 2") {
$(this).bind("dragover", function(e) {
console.log($(this).attr("summary"));
e.preventDefault();
return false;
});
$(this).bind("drop", function(e){
console.log($(this).attr("summary"));
e.preventDefault();
return false;
});
}
});