riktar / jkanban

Vanilla Javascript plugin for manage kanban boards
https://www.riccardotartaglia.it/jkanban/
Apache License 2.0
1.08k stars 300 forks source link

dropEl function for sorting boards #173

Closed Brecht272727 closed 2 years ago

Brecht272727 commented 2 years ago

Hi, is it possible to have a callback when we sort the boards. The same functionality we have in dropEl function for sorting the items. See below for the code i am using now for sorting the items.

    dropEl: function(el, target, source, sibling) {

      var _target = $(target.parentElement);
      var sorted = [];
      var nodes = kanban1.getBoardElements(_target.data("id"));
      var currentOrder = 0;
      nodes.forEach(function(value, index, array) {
        sorted.push({
          "id": $(value).data("eid"),
          "order": currentOrder++
        })
      });

      console.log(JSON.stringify(sorted));

      var sourceId = $(source).closest("div.kanban-board").attr("data-id"),
          targetId = $(target).closest("div.kanban-board").attr("data-id");

      console.log(sourceId)
      console.log(targetId)

      if(source === target) {
          // same column
      } else {
          // different column
      }    

    }
Brecht272727 commented 2 years ago

I found this but don't know how to use it: https://github.com/riktar/jkanban/pull/28

I think it is something with this function but i don`t know how to use it:

        dragendBoard: function (el) {
          console.log(el);
        },

If i can have the order of the boards is the most important! Something like we have here for the items:

      var _target = $(target.parentElement);
      var sorted = [];
      var nodes = kanban1.getBoardElements(_target.data("id"));
      var currentOrder = 0;
      nodes.forEach(function(value, index, array) {
        sorted.push({
          "id": $(value).data("eid"),
          "order": currentOrder++
        })
      });
WriterStat commented 2 years ago

Hi @Brecht272727,

Answer:

dragendBoard is basically called when you drop/stop dragging a board.

Each board gets an updated data-order attribute. You can interrogate the boards in the DOM for their data-order.

You have to take into consideration Boards can be dragged. And automatic reordering would break any user customization.

marcosrocha85 commented 2 years ago

That's I always send my fiddle to people here. https://jsfiddle.net/marcosrocha85/Lk9t483r/

Brecht272727 commented 2 years ago

My code how i solved this. With the ajax i saved the boards order in database:

          dragendBoard: function (el) {
            var nodes = el.parentElement.childNodes;
            var sorted = [];
            var currentOrder = 0;
            nodes.forEach(function(value, index, array) {
              sorted.push({
                "id": $(value).data("id"),
                "order": currentOrder++
              })
            });

            $.ajax({
              type: 'POST',
              url: 'assets/ajax/kanban-save-boards.php',
              dataType: 'html',
              cache: false,
              data: {
                sorted_array: JSON.stringify(sorted),
              },
              success: function (data) {
                console.log(data);
              },
              error: function (xhr, status, error) {
                  console.log('An error occurred');
                  var err = eval("(" + xhr.responseText + ")");
                  console.log(err);
              }
          });        

          },