Блог

Главная - Вопросы по программированию - Изменение размера с помощью Interact JS

Изменение размера с помощью Interact JS

#javascript #html #interactive

#javascript #HTML #интерактивный

Вопрос:

Следующий код Javascript связан с HTML-файлом. Файл показывает неожиданную ошибку идентификатора. Может кто-нибудь, пожалуйста, помочь мне? Я использовал interactJS для изменения размера элементов в классе resize-drag. Я включил HTML, CSS и файл Javascript. Я просто пытаюсь реализовать пример изменения размера, представленный на Interact.js сам веб-сайт.

 interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener,
    modifiers: [
      interact.modifiers.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 },

    modifiers: [
      // keep the edges inside the parent
      interact.modifiers.restrictEdges({
        outer: 'parent',
        endOnly: true,
      }),

      // minimum size
      interact.modifiers.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);
  });

HTML-ФАЙЛ

 <!DOCTYPE html5>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="drag.css">
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/interact-js@2.1.0/interact.min.js"></script>
     <script type="text/javascript" src = "drag.js"></script>

    <title>Drag and drop</title>
</head>
<body>

<div class="resize-container">
  <div class="resize-drag">
       </div>
</div>
</body>
</html>

Файл CSS:

 .resize-drag {
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 20px;
  touch-action: none;

  width: 120px;

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

.resize-container {
  display: inline-block;
  width: 100%;
  height: 240px;
}

Комментарии:

1. Опубликованный вами код не содержит синтаксических ошибок. Какой браузер вы используете?

2. Привет, пожалуйста, будьте более точны в своей проблеме, можете ли вы в less указать строку, в которой возникает неожиданное исключение идентификатора, и ваш HTML-файл.

3. Вы ссылаетесь на jquery <head> до или после этого файла?

4. Я предоставил все три файла выше, не могли бы вы проверить и помочь мне?

5. Не могли бы вы скопировать и вставить точную ошибку, которую вы видите в консоли? Это должно сопровождаться номером строки, в которой произошла ошибка. Затем вы можете выделить соответствующую строку, которая выбрасывается. Кроме того, добро пожаловать! Рад, что вы в сообществе.

Ответ №1:

Для тех, кто интересуется, в чем ошибка, в коде javascript не была dragMoveListener определена функция (эта функция вызывается в параметре draggable объекта метода)

Исправление — это просто определение и «активация» функции. К счастью, официальные документы предоставляют эту функцию. Просто поместите это в начало файла:

 
function dragMoveListener (event) {
    var target = event.target
    // keep the dragged position in the data-x/data-y attributes
    var x = (parseFloat(target.getAttribute('data-x')) || 0)   event.dx
    var 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)
}


window.dragMoveListener = dragMoveListener
Метки: