Javascript 使用interactJs调整可拖动元素的大小

我正在构建一个可拖动的元素块，它也应该调整大小。 只能在x轴上进行拖放和调整大小

我选择interactJs作为支持库来管理拖放和调整大小

在拖放时一切都很好，但是当我添加了调整大小，移动不再是线性的，如果我调整块的大小，然后移动它，它会在另一个x位置上滑动

以下是js代码：

var element = document.getElementById('block1'),
    x = 0, y = 0;

interact(element)
  .draggable({
    snap: {
      targets: [
        interact.createSnapGrid({ x: 30, y: 30 })
      ],
      range: Infinity,
      relativePoints: [ { x: 0, y: 0 } ]
    },
    inertia: true,
    restrict: {
      restriction: element.parentNode,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
      endOnly: true
    }
  })
  .on('dragmove', function (event) {    
  var target = event.target;
    x += event.dx;
    event.target.style.webkitTransform = event.target.style.transform = 'translate(' + x + 'px)';
    target.setAttribute('data-x', x);
  }).resizable({
    // resize from all edges and corners
    edges: { left: true, right: true, bottom: false, top: false },

    // keep the edges inside the parent
    restrictEdges: {
      outer: 'parent',
      endOnly: true,
    },

    // minimum size
    restrictSize: {
      min: { width: 100, height: 50 },
    },

    inertia: true,
  })
  .on('resizemove', function (event) {
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0);

    // update the element's style
    target.style.width  = event.rect.width + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('title', 'Size: ' + Math.round(event.rect.width) + 'x' + Math.round(event.rect.height));
  });

如您所见，每次用户执行拖放或调整大小时，我都会将x位置保存在data-x属性中，以便在其他事件中检索

这是一把小提琴：

---

为了重现问题，请尝试将块移动到中心，然后应用较大的调整大小，然后再次移动它。

将x值更改为x=event.clientX-target.offsetWidth/2

你会得到：

 .on('dragmove', function (event) {  
  var target = event.target;
    x = event.clientX - target.offsetWidth/2;
    event.target.style.webkitTransform = event.target.style.transform = 'translate(' + x + 'px)';
    target.setAttribute('data-x', x);
  })

在小提琴上查看它：

---

为平滑拖动添加css仍然存在一些缺陷。它也可以在你的小提琴中看到：当你点击块移动它时，它会滑动一点，给用户造成非常糟糕的反馈。