Изменение размера перетаскиваемых элементов с интерактивными

Question

Я строю блоки перетаскиваемых элементов, которые также должны быть изменены .Перетаскивание и изменение размера возможно только на оси x .

. Я выбрал interactiveJs в качестве вспомогательной библиотеки для управления перетаскиванием и изменением размера.

С перетаскиванием все в порядке, но когда я добавил также изменение размера, движение перестало быть линейным, и если я изменил размер блока, а затем переместил его, он переместился в другую позицию 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/