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

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

我的要求是我需要将某些行标记为不可拖动和/或不可丢弃（因此其他行不能被删除）。

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

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

还有别的办法吗？ 有人可以用一些代码指导我吗？

Answer 1

JQUERY UI DRAGGABLE＆DROPABLE SECTION

这个问题很频繁，我得到了答案

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

我在小提琴HTML中做得非常漂亮

Note: Row 4 is disabled 
Table 1
 
 
Row 1
 
Row 2
 
Row 3
 
Row 4
 
Row 5
 
 
Table 2
 
 
Row 6
 
Row 7
 
Row 8
 
Row 9
 
Row 10
  

和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中执行类似的操作，您可以使用viewmodel项中的foreach循环填充表，即

  @{ foreach(var item in Model.Table1.Items){  }} 
 @Model.Table1.RowText  

为了支持这个例子，你有一个带有自定义MyTable对象的ViewModel

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

你的viewmodel看起来像

 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 }