我是否正确使用了交互.js v1.1.3

Am I using interact.js v1.1.3 incorrectly?

本文关键字：js 交互 v1 是否      更新时间：2023-09-26

我试图 http://interactjs.io/工作，但即使使用最简单的设置，似乎也没有任何反应：

interact('#thing').draggable({
    onstart:function(){
        console.dir('drag start');
    },    
    onmove:function(){
        console.dir('moving');
    },    
    onend:function(){
        console.dir('drag end');
    },
});

事件会触发，但元素不会四处移动。 元素是否需要由任何特殊内容包含或具有任何类型的类或其他属性值？ 库是否有文档未提及的任何依赖项？

http://jsfiddle.net/vd2m9vxg/2/

在这个小提琴中，我应该能够移动红色方块，但什么也没发生。 它对你有用吗？ 也许是我的浏览器有问题。我已经在最新版本的IE，FF和Chrome中对其进行了测试。

交互.js不会为您移动元素。它仅提供拖动数据。如项目主页上的拖动演示所示，移动 html 元素必须在 dragmove 事件处理程序中完成：

// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // call this function on every dragmove event
    onmove: function (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);
    }
  });
相关文章：