Question

我正在构建可拖动的元素块，该元素块也应调整大小。拖放和调整大小都只能在 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属性中，以便在其他事件中进行检索。

这里是一个小提琴：https://jsfiddle.net/9qrd5vgn/1/

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

Answer 1

将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);
  })

在小提琴上检查一下： https://jsfiddle.net/adratarek/7dj4f25p/17/

添加CSS以平滑拖动https://jsfiddle.net/adratarek/c10Lpavy/1/

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

1 个答案: