how to set Individual rows marked as non-draggable

问题:

I am using jquery draggable plugin in my asp.net MVC 3 app, where user can drag/drop a row of a table.

My requirement is that I need to mark some rows of table as non-draggable and/or non-droppable (so other rows can’t be dropped onto them).

Can someone guide me how to enable this?

Note: one option I see on web is "TableDnD plugin".

Is there any other way. could someone can guide me with some code??

回答1:

JQUERY UI DRAGGABLE & DROPPABLE SECTION

this question is asked frequnlty enough that I made an answer

see http://jsfiddle.net/mouseoctopus/d7wsz/6/ EDIT update: http://jsfiddle.net/mouseoctopus/gkp3D/

I made it really pretty in the fiddle 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>   

and JQuery (needs to include jquery ui lib and css as well)

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

and some 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 RELEVANT SECTION

To do something like this in mvc3, you would populate the tables using a foreach loop from your viewmodel items, ie

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

To support this example you'd have a ViewModel with custom MyTable objects

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

and your viewmodel would look something like

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
}