1. Home
  2. Forum
  3. ASP.NET MVC
  4. card drop

card drop

how I can prevent drop based on some logic and return it to the previous location 

4 Replies
BS Buvana Sathasivam Syncfusion Team August 18, 2017 06:10 AM UTC

Hi Musab Adnan Basheer,   
  
Thanks for using Syncfusion products.   
  
Please use “cardDragStop” event for cancelling the card drop through events.  The “cardDragStop” event is triggered before dropping the card into the target area, and you can drag back the card to its original position.  We have set “args.cancel” to true and removed the target clone when cardDragStop event triggered.  Refer to the following code.   
 
 
KanbanFeature.cshtml   
  
@(Html.EJ().Kanban("Kanban")   
         .ClientSideEvents(eve => eve.CardDragStop("cardDragStop"))   
)      
   
function cardDragStop(args) {   
        args.cancel = true;           // Set arguments cancel value as true   
        if (args.cancel)   
            $("#Kanban").find(".e-targetclone").remove(); // target clone was removed    
        alert("cancel card drop");   
    }   
 
Refer to the below screenshots.   
  
Screenshot #1:  Before card drop.   
  
    
  
Screenshot #2: We dragged the card from “InProgress” column and dropped it into “Done” column.   
  
    
  
Screenshot #3:  After dropping the card, the card was moved to “InProgress” column.   
  
    
   
   
   
  
Regards,   
Buvana S.   
 
 


MA Musab Adnan Basheer August 18, 2017 04:46 PM UTC

Thank you for your answer!)


MA Musab Adnan Basheer August 18, 2017 05:40 PM UTC

After using this $("#Kanban").find(".the-target clone").remove();

all cards cannot move.


BS Buvana Sathasivam Syncfusion Team August 21, 2017 07:08 AM UTC

Hi Musab,   
  
Thanks for your update.   
  
In the previous update, we had provided all Kanban cards to prevent card dropping and move into the previous position using “cardDragStop” event.  If you wish to prevent a particular card from moving from its original position, you need set “args.cancel” to true on the particular card based on its primary key or any other card value.  Please refer to the following code.   
  
kanbanFeature.cshtml   
  
@(Html.EJ().Kanban("Kanban")   
       .ClientSideEvents(eve => eve.CardDragStop("cardDragStop")) // Card drop event   
)      
   
   
<script>   
    function cardDragStop(args) {   
        if (args.data[0][0].Id == 8 || args.data[0][0].Id == 10) {  // Set particular card to prevent card dropping    
            args.cancel = true;   
            $("#Kanban").find(".e-targetclone").remove(); // target clone was removed    
            alert("cancel card drop");   
        }   
    }   
</script>   
  
In this above code, we have prevented cards from dropping using the particular card primary key values (8 and 10). In this sample, card 8 and card 10 do not allow card dropping.  The remaining cards are allowed card dropping. If the suggestion didn’t work for your scenario, please explain your requirement in detail on preventing particular card drop so that we can provide an appropriate solution.   
  
  
  
Regards,   
Buvana S.   
 


Loader.
Up arrow icon