Question

我正在尝试学习如何使用interact.js库，但我无法获得调整大小的示例以进行拖动。我可以调整div“ .resize-drag”的大小，但我不知道如何使其可拖动。谁能告诉我我的代码有问题吗？

该代码仅是为了使我能够学习实现http://interactjs.io/中提供的调整大小示例，到目前为止，我已经尝试使用npm代替script标签。当我从interact.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而不仅仅是调整其大小。

Answer 1

我最近也为此而苦苦挣扎，结果发现“调整大小”的代码内容并没有全部代码。 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;

在interact.js中调整大小

1 个答案: