reordered callback is called with a simply click in a brick about jquery-gridly HOT 6 OPEN

I think the problem is on line 83

this.$container[method]('mousedown touchstart', this.selector, this.began);

So I changed the listener to 'mousemove' instead of 'musedown'

this.$container[method]('mousemove touchstart', this.selector, this.began);

and in the 'began' method to differentiate when we are really moving a brick I am checking the mouse event buttons

Draggable.prototype.began = function(event) {
  var _ref;
  if (this.$target) {
    return;
  }
  event.preventDefault();
  event.stopPropagation();

  if (!(event.buttons == 1 && event.which == 1)) {
      return;
  }

  this.bind('on');
  this.$target = $(event.target).closest(this.$container.find(this.selector));
  this.$target.addClass('dragging');
  this.origin = {
    x: this.coordinate(event).pageX - this.$target.position().left,
    y: this.coordinate(event).pageY - this.$target.position().top
  };
  return (_ref = this.callbacks) != null ? typeof _ref.began === "function" ? _ref.began(event) : void 0 : void 0;
};

Maybe is not be the most elegant way to solve the problem, but for now it works.

Also would be nice if the 'reordered' callback will be called only if you have really changed the positions of the bricks, it is only a proposal.

Cheers.

from jquery-gridly.

@bellzebu Sounds like a bug. I'll try to take a look at it when I get a chance.

from jquery-gridly.

Thank you Kevin.

A temporary fix to know when the order is really changed consists in compare the actual $selected array in the callback with another array containing the previous $selected.

Cheers.

from jquery-gridly.

+1

from jquery-gridly.

Easy solution to prevent reorder on mouse click is to add this line to Gridly.prototype.draggingEnd

Gridly.prototype.draggingEnded = function(event) {
    if (!this._draggable.dragged) return;
    // ...
});

I have also added a check to see which elements actually changed

Gridly.prototype.draggingEnded = function(event) {
    // prevent simple mouse click reordered callback
    if (!this._draggable.dragged) return;
    var $elements, before, ref, ref1, reordered = [];
    // remember initial order elements
    before = this.$('> *');
    $elements = this.$sorted();
    this.ordinalize($elements);
    setTimeout(this.layout, 0);
    // do a check to see if any items actually changed
    $elements.each(function(index, el){
        var ordered = before[index];
        if ($(el).data('position') !== $(ordered).data('position')) {
            reordered.push(el);
        }
    });
    // nothing changed
    if (!reordered.length) return;
    // pass reordered items as second parameter to the callback
    return (ref = this.settings) != null ? (ref1 = ref.callbacks) != null ? typeof ref1.reordered === "function" ? ref1.reordered($elements, reordered) : void 0 : void 0 : void 0;
};

Drag handling logic needs some improvement. Also lines like this make the code very hard to read

return (ref = this.settings) != null ? (ref1 = ref.callbacks) != null ? typeof ref1.reordered === "function" ? ref1.reordered($elements, reordered) : void 0 : void 0 : void 0;```

from jquery-gridly.

Maybe this is a bad answer, but finally I decided to use this.
$("#grl_OrdersToList>.StyledCard .cardIndex").each(function (index) {
$(this).text(index+1);
});

from jquery-gridly.