asp.net 2 GridViews permettent de glisser-déposer de la source à la destination, mais pas vice-versa

Question

J'ai deux GridViews:

    <asp:GridView ID="gvCourses" runat="server" DataKeyNames="Course_ID" AutoGenerateColumns="False" CssClass="drag_drop_grid GridSrc" 

            ShowHeaderWhenEmpty="true" 
            ShowFooter="True"> 
         <Columns> 
          <asp:BoundField DataField="CourseName"/> 
          <asp:BoundField DataField="DefaultSlope"/> 
         </Columns> 
        </asp:GridView> 
        <hr/> 
        <asp:GridView ID="gvDest" runat="server" CssClass="drag_drop_grid drag_and_drop_grid_sortable GridDest" AutoGenerateColumns="false"> 
         <Columns> 
          <asp:BoundField DataField="CourseName"/> 
          <asp:BoundField DataField="DefaultSlope"/> 
         </Columns> 
        </asp:GridView> 

J'utilise le code suivant pour glisser-déposer entre eux:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> 
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> 
<script type="text/javascript"> 
$(function() { 
    $(".drag_drop_grid").sortable({ 
     items: 'tr:not(tr:first-child)', 
     cursor: 'crosshair', 
     connectWith: '.drag_drop_grid', 
     dropOnEmpty: true, 
     receive: function(e, ui) { 
      $(this).find("tbody").append(ui.item); 
     }, 
     sort: function (event, ui) { 
      var tdCount = 0; 
      ui.item.find('td').each(function() { 
       tdCount++; 
       if (tdCount > 3) 
        $(this).remove(); 
      }); 
     }, 
     beforeStop: function (event, ui) { 
      var tdCount = 0; 
      ui.item.find('td').each(function() { 
       tdCount++; 
       if (tdCount > 3) 
        $(this).remove(); 
      }); 
     }, 
     helper: function (e, tr) { 
      //copyHelper = 
      tr.clone().insertAfter(tr); 
      var tdCount = 0; 
      tr.find('td').each(function() { 
       tdCount++; 
       if (tdCount > 3) 
        $(this).remove(); 
      }); 
      return tr.clone(); 
     } 
    }); 
    $("[id*=gvDest] tr:not(tr:first-child)").remove(); 
}); 
</script> 

Cela fonctionne correctement, mais il permet de trier la grille de la source et de dupliquer les enregistrements. En d'autres termes, je peux laisser tomber des choses sur cette grille qui n'est pas souhaitable.

Il permet également à la grille de destination de dupliquer ses propres enregistrements/lignes de table.

Que dois-je changer dans mon script:

1. Disallow tri et tomber sur la grille source.
2. Interdire la copie depuis la grille de destination.

Merci.

Answer 1

Cela a pris plus de temps que je voulais, mais ...

$("#gvCourses tr:not(tr:first-child)").draggable({ 
     connectToSortable: '#gvSelectedCourses', 
     helper: "clone", 
     revert: "invalid", 
     cursor: "move" 
    }); 

    $("#gvSelectedCourses").sortable({ 
     items: 'tr:not(tr:first-child)', 
     cursor: 'crosshair', 
     dropOnEmpty: true, 
     receive: function (e, ui) { 
      sortableIn = 1; 
      copyHelper = null; 
     }, 
     beforeStop: function (event, ui) { 
      if (sortableIn == 0) { 
       ui.item.remove(); 
      } 
     }, 
     over: function (e, ui) { sortableIn = 1; }, 
     out: function (e, ui) { sortableIn = 0; }, 
    }); 

La première table - gvCourses - n'est pas sortable ou largable, ni peut-il avoir des lignes supprimées et je peux faire glisser les lignes de celui-ci à la deuxième table.

La deuxième table - gvSelectedCourses - est triable et droppable et je peux en retirer des lignes de table et elle peut prendre des lignes en double.