如何设置标记为非拖动和/或非可弃个人行？ [英] how to set Individual rows marked as non-draggable and/or non-droppable?

问题描述

我使用jquery可拖动的插件在我的asp.net MVC 3应用程序，在这里用户可以拖动/删除表中的一行。

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?

请注意：一个选择我的网站看到的是TableDnD插件

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

是否有任何其他方式。可能有人能指导我一些code ??

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

推荐答案

jQuery UI的拖动和放大器;投掷的栏目

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

this question is asked frequnlty enough that I made an answer

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

我把它真的pretty在小提琴
HTML

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>   

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

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
    }
});

和一些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循环表，即

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>

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

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
}

这篇关于如何设置标记为非拖动和/或非可弃个人行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！