0

ユーザーがテーブルの行をドラッグ/ドロップできるasp.net MVC 3アプリでjqueryのドラッグ可能なプラグインを使用しています。

私の要件は、テーブルのいくつかの行をドラッグ不可および/またはドロップ不可としてマークする必要があることです(そのため、他の行をそれらにドロップすることはできません)。

これを有効にする方法を教えてもらえますか?

注: Web で表示されるオプションの 1 つは、「TableDnD プラグイン」です。

他に方法はありますか。誰かがコードで私を導くことができますか??

4

1 に答える 1

2

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 でこのようなことを行うには、viewmodel アイテムから 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
}
于 2013-06-13T03:59:22.320 に答える