want to implement auto horizontal scrolling functionality in my kanban board

53 views Asked by At

I want to make a kanban board which having multiple column in each column list of cards and I want to be able to move cards between columns or sort in an specific column. All things works good. But how can I implement autoscroll for when I want to move a card from one column to another horizontally while I need horizontal scrolling? Assume my card is in first column on most left side of screen and my destination is last column which is out of view port on most right side and I need auto scroll. Now auto scrolling in a list vertically works well.

i used sortable js to move card from one column to other column and i am using ruby on rails framework.

i tried many solution but it didn't worked well so if you provide any solution it will very helpful, here i am attaching my sortable js code .

$(".kanban-column, .kanban-column .sub-tickets, .sub-card").sortable({
      connectWith: ".kanban-column",
      cancel: "#main-tickets, .heading",

      start: function () {
        $("body").css("overflow-x", "hidden");
      },
      out: function () {
        $(this).addClass("bg-transparent");
      },

      over: function () {
        $(this).removeClass("bg-transparent");
        $(this).addClass("bg-black bg-opacity-10");
      },

      receive: function (event, ui) {
        $("body").css("overflow-x", "auto");
        var kanban_col_id = this.parentElement.dataset.item
        var resource_info_id = ui.item[0].dataset.resource_info_id
        var resource_status = ui.item[0].dataset.resource_status
        var created_by = ui.item[0].dataset.created_by

0

There are 0 answers