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

Question

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

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

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

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

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

Answer 1

JQUERY UI 可拖放部分

这个问题被问到的频率足够我回答了

见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 对象的 ViewModel

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
}