card drop

[Musab Adnan Basheer]

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

[Buvana Sathasivam]

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.   

  

    

   

API link: https://help.syncfusion.com/api/js/ejkanban#events:carddragstop    

   

   

Sample: http://www.syncfusion.com/downloads/support/forum/132162/ze/Process_bindings_prevent_carddrop-201970815  

  

Regards,   

Buvana S.   

 

 

[Musab Adnan Basheer]

Thank you for your answer!)

[Musab Adnan Basheer]

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

all cards cannot move.

[Buvana Sathasivam]

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.   

  

API link: https://help.syncfusion.com/api/js/ejkanban#events:carddragstop    

  

Sample: http://www.syncfusion.com/downloads/support/forum/132162/ze/Process_bindings_-_Copy2095303429     

  

Regards,   

Buvana S.