Can magnetjs be used with interactjs?

[talhakaanozkan]

https://github.com/taye/interact.js

hi, i'm using interactjs in events like drag drop resize. But how do you use magnetjs (snap events) to make the two better together?

https://jsfiddle.net/talhakaanozkan/qjtnd2re/16/

[lf2com]

Hi @talhakaanozkan, I read the code you provided. Since you used transform: translate(...) to move the dragged element. I wrote the following code based on your code:

1. Setup magnet group

const magnet = (function() {
  // add target elements into magnet group
  const doms = document.querySelectorAll('.draggable');
  const magnet = new Magnet(doms);

  magnet.setDistance(15); // set distance
  magnet.setAllowDrag(false); // disable drag function of magnetjs

  // disable needless alignments
  // magnet.enabledAlignOuter(false);
  // magnet.enabledAlignInner(false);
  // magnet.enabledAlignCenter(false);

  // *IMPORTANT* you need to erase the following styles changed by magnetjs
  Array.prototype.forEach.call(doms, (dom) => {
    dom.style.position = '';
    dom.style.top = '';
    dom.style.left = '';
    dom.style.width = '';
    dom.style.height = '';
    dom.style.zIndex = '';
  });
  return magnet;
})();

2. Change onend function of your interactjs object:

onend: function(event) {
  ...

  // add the following codes:
  // record the last x, y position for next time dragging
  var target = event.target;
  target.setAttribute('data-ox', target.getAttribute('data-x'));
  target.setAttribute('data-oy', target.getAttribute('data-y'));
}

3. Change your dragMoveListener function. We need to implement the attract effect ourselves:

var target = event.target;

// last x, y offset from the origin position of element
var originX = parseFloat(target.getAttribute('data-ox')||0);
var originY = parseFloat(target.getAttribute('data-oy')||0);

// offset 
var offsetX = target.offsetLeft;
var offsetY = target.offsetTop;

// change the reference of x, y from dx/dy to clientX0/Y0 with last x/y
var x = event.clientX - event.clientX0 + originX;
var y = event.clientY - event.clientY0 + originY;

var _distance = magnet.getDistance(); // get attract distance (15)
var rect = target.getBoundingClientRect();

// check the attract results with **currently dragging** position
// if we don't set the left/top values with current x/y, the result would make the element freeze when attracted
var checkResult = magnet.check(target, {
  left: x + offsetX,
  top: y + offsetY,
  width: rect.width,
  height: rect.height,
});

// find out the nearest results on x/y axis
// this code is similar to **magnet.handle(...)** but we have to implement it with some changes because we use **transform: translate(...)** rather than **top: ...; left: ...**
var result = checkResult.targets
  .reduce(function({ x, y }, { target, results, ranking }) {
    return ranking.reduce(function({ x, y }, prop) {
      var value = results[prop];
      if (value <= _distance) {
        switch (prop) {
          case 'rightToRight':
          case 'leftToLeft':
          case 'rightToLeft':
          case 'leftToRight':
          case 'xCenter':
            if (x === null || value < x.value) {
              x = { prop, value, target };
            }
            break;

          case 'topToTop':
          case 'bottomToBottom':
          case 'topToBottom':
          case 'bottomToTop':
          case 'yCenter':
            if (y === null || value < y.value) {
              y = { prop, value, target };
            }
            break;
        }
      }
      return { x, y };
    }, { x, y });
  }, { x: null, y: null });

// check if there is attract event on x axis
if (result.x) {
  // if yes, change the x value to make element attracted on the side
  var xResult = result.x;
  var xTargetRect = xResult.target.rect;
  switch (xResult.prop) {
    case 'leftToRight': x = xTargetRect.right - offsetX; break;
    case 'rightToRight': x = xTargetRect.right - rect.width - offsetX; break;
    case 'rightToLeft': x = xTargetRect.left - rect.width - offsetX; break;
    case 'leftToLeft': x = xTargetRect.left - offsetX; break;
    case 'xCenter': x = (xTargetRect.left + xTargetRect.right - rect.width)/2 - offsetX; break;
  }
}

// check if there is attract event on y axis
if (result.y) {
  // if yes, change the y value to make element attracted on the side
  var yResult = result.y;
  var yTargetRect = yResult.target.rect;
  switch (yResult.prop) {
    case 'topToBottom': y = yTargetRect.bottom - offsetY; break;
    case 'bottomToBottom': y = yTargetRect.bottom - rect.height - offsetY; break;
    case 'bottomToTop': y = yTargetRect.top - rect.height - offsetY; break;
    case 'topToTop': y = yTargetRect.top - offsetY; break;
    case 'yCenter': y = (yTargetRect.top + yTargetRect.bottom - rect.height)/2 - offsetY; break;
  }
}

After that you should see the attract effect on your sample. However, there are something wrong if the elements are dragged with parent element scrolled. So please prevent the parent element to scroll when using magnetjs v1.0.5 and earlier versions.

[talhakaanozkan]

thank you sizing how to follow the path. InteractJS Resize

[talhakaanozkan]

In dragstart, I select and align only those currently displayed on the screen.

https://benpickles.github.io/onScreen/

[lf2com]

Since the scrolling issue should be a further feature to implement into magnetjs. It's great to hear that you already make them under control. If there is still any problem, please let me know. Looking forward to the finished goods!

[talhakaanozkan]

// *IMPORTANT* you need to erase the following styles changed by magnetjs
  Array.prototype.forEach.call(doms, (dom) => {
    dom.style.position = '';
    dom.style.top = '';
    dom.style.left = '';
    dom.style.width = '';
    dom.style.height = '';
    dom.style.zIndex = '';
  });

thank you for your answer.

I have a problem elsewhere.
can I prevent magnet js from printing top-left-width-height? never press.

I do not want him to remove. because there are left top values that matter to me.

[lf2com]

Since magnetjs would set the position style of element by default, there is a workaround I recommend. That is, replace magnet.setMemberRectangle function with function(){}.
Here is the sample:

const magnet = new Magnet(); // new a magnet object but not add elements here
magnet.setMemberRectangle = function(){}; // replace this function
magnet.add(elements); // add elements after replace setMemberRectangle function

What setMemberRectangle does is to apply a rectangle style to a target element. Magnetjs set element's style here. Replace it with a do-nothing function so that your magnet obejct would not set any style to magnet members.

Also, please don't call magnet.removeFull(elements) on the end of magnet handling because the function would set the following styles to elements:

position: '';
top: '';
right: '';
bottom: '';
left: '';
width: '';
height: '';
z-index: '';

Instead, call magnet.remove(elements)