如何设置标记为不可拖动和/或不可拖放的单个行？

Question

我在我的asp.net MVC 3应用程序中使用jQuery可拖放插件，用户可以在其中拖放一行表。

我的要求是我需要将表的某些行标记为不可拖拽和/或不可拖拽（所以其他行不能放到它们上面）。

有人可以指导我如何启用它？

注意：我在网上看到的一个选项是“TableDnD插件”。

有没有其他办法。有人可以引导我一些代码？

Answer 1

jQuery UI的可拖动&可放开部分

这个问题是问frequnlty不够，我做了一个答案

看到http://jsfiddle.net/mouseoctopus/d7wsz/6/ 编辑更新：http://jsfiddle.net/mouseoctopus/gkp3D/

我在拨弄使得它真的很漂亮 HTML

Note: Row 4 is disabled 
<h1>Table 1</h1> 
<table id="Table1"> 
    <tr><td>Row 1</td></tr> 
    <tr><td>Row 2</td></tr> 
    <tr><td>Row 3</td></tr> 
    <tr class='disabled'><td>Row 4</td></tr> 
    <tr><td>Row 5</td></tr> 
</table> 

<h2>Table 2</h2> 
<table id="Table2"> 
<tr><td>Row 6</td></tr> 
<tr><td>Row 7</td></tr> 
<tr><td>Row 8</td></tr> 
<tr><td>Row 9</td></tr> 
<tr><td>Row 10</td></tr> 
</table> 

和JQuery（需要包括jQuery UI的lib和CSS以及）

$("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled)").draggable({ 
    helper: 'clone', 
    revert: 'invalid', 
    start: function (event, ui) { 
     $(this).css('opacity', '.5'); 
     }, 
    stop: function (event, ui) { 
     $(this).css('opacity', '1'); 
    } 
}); 

$("#Table1, #Table2").droppable({ 
    drop: function (event, ui) { 
     $(ui.draggable).appendTo(this); 
     alert($(ui.draggable).text()); 
     //fire ajax here if needed 
    } 
}); 

和一些CSS

table{ width:200px; border: brown 1px solid; padding:5px;} 
table tr {background-color:#FCF6CF;} 
table tr:hover:not(.disabled) {background-color:#ECF1EF;} 
tr:not(.disabled){cursor:pointer;} 
tr.disabled{background-color:#FEE0C6; cursor:not-allowed;} 

MVC3相关部分

要MVC3做这样的事情，您可以使用视图模型项目中的foreach循环填充表格，即

<table id="@Model.Table1.Name"> 
@{ foreach(var item in Model.Table1.Items){ 
    <tr><td> @Model.Table1.RowText </tr></td> 
}} 
</table> 

为了支持这个例子中，你就会有一个视图模型定制MyTable的对象

public class MyTable{ 
    public List<String> RowText {get;set;} 
    public string Name {get;set;} 
} 

和您的视图模型将看起来像

public class MyViewModel{ 
    public MyTable Table1{get;set;} 
    public MyTable Table2{get;set;} 

    //and it would also include the properties for other elements on the page too 
}