Изменение размера в interactive.js - PullRequest
Новая
       32

Изменение размера в interactive.js

0 голосов
/ 07 февраля 2019

Я пытаюсь научиться пользоваться библиотекой interactive.js и не могу перетащить пример изменения размера.Я могу изменить размер div ".resize-drag", но я не знаю, как сделать его перетаскиваемым.Может кто-нибудь сказать мне, что не так с моим кодом?

Этот код предназначен только для того, чтобы я мог научиться реализовывать пример изменения размера, предоставленный в http://interactjs.io/ До сих пор я пытался использовать npm вместо тега script.Когда я скопировал приведенный ниже пример с верхней части веб-сайта interactive.js и переименовал элемент «.item» в разделе «взаимодействовать», но это не сработало 

interact('.item').draggable({
onmove(event) {
console.log(event.pageX,
            event.pageY)
  }
})

, я подозревал, что это может быть синтаксической ошибкой, поэтомуЯ также попытался добавить точку с запятой после функции, но это не проблема.Пожалуйста, посмотрите на весь мой код ниже, чтобы увидеть, что я сделал неправильно. 

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project 
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .resize-drag {
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 20px;

  width: 120px;

  /* This makes things *much* easier */
  box-sizing: border-box;
 }

.resize-container {
  display: inline-block;
  width: 100%;
  height: 240px;
  background-color: lightblue;
}
        </style>

        <script 
src="https://unpkg.com/interactjs@1.3.4/dist/interact.min.js"></script>

        <script type="text/javascript">


    interact('.resize-drag').draggable({
    onmove(event) {
    console.log(event.pageX,
            event.pageY)
  }
})



    interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener,
    restrict: {
      restriction: 'parent',
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
  })


  .resizable({
    // resize from all edges and corners
    edges: { left: true, right: true, bottom: true, top: true },

    // 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),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

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

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = Math.round(event.rect.width) + '\u00D7' +         
 Math.round(event.rect.height);
  });

        </script>
    </head>
    <body>

    <div class="resize-container">
         <div class="resize-drag">
         Resize from any edge or corner
         </div>
   </div>



    </body>
</html>

Я хочу иметь возможность перетаскивать div, а не просто изменять его размер.

1 Ответ

0 голосов
/ 06 марта 2019

Недавно я тоже боролся с этим, и оказалось, что в коде «изменение размера» не весь код.В js отсутствует window.dragMoveListener и dragMoveListener, который находится в разделе «перетаскивание».

В частности, вам нужно добавить это 

  function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

  // this is used later in the resizing and gesture demos
  window.dragMoveListener = dragMoveListener;
...