具有最佳性能的移动设备可拖动项目答案

【问题标题】：Draggable items for mobile with best performance具有最佳性能的移动设备可拖动项目
【发布时间】：2015-07-13 23:09:28
【问题描述】：

我需要具有最佳性能的移动设备可拖动列表
我使用了一些 jQuety 插件，但性能不够
请告诉我一个用于高性能拖动的 javascript 库
我更喜欢聚合物或反应帆布方式谢谢

【问题讨论】：

为什么我有-1分？！！

标签： javascript jquery performance mobile polymer

【解决方案1】：

iron-list 元素可能对您有用。你可以下载它并查看它的文档here。

【讨论】：

我需要可拖动的项目，更改项目位置

【解决方案2】：

为了在移动设备上获得更好的性能，请将 translate 更改为 translate3d 并添加第三个参数 0：

'translate3d(' + x + 'px, ' + y + 'px, 0)';

【讨论】：

【解决方案3】：

我找到了interactjs。这是我见过的最好的表演！

// Target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // Enable inertial throwing
    inertia: true,
    // Keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },

    // Call this function on every dragmove event
    onmove: dragMoveListener,
    // Call this function on every dragend event
    onend: function (event) {
      var textEl = event.target.querySelector('p');

      textEl && (textEl.textContent =
        'moved a distance of '
        + (Math.sqrt(event.dx * event.dx +
                     event.dy * event.dy)|0) + 'px');
    }
  });

  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 demo
  window.dragMoveListener = dragMoveListener;

#drag-1, #drag-2 {
  width: 25%;
  height: 100%;
  min-height: 6.5em;
  margin: 10%;

  background-color: #29e;
  color: white;

  border-radius: 0.75em;
  padding: 4%;

  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

#drag-me::before {
  content: "#" attr(id);
  font-weight: bold;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.4/interact.min.js"></script>

<div id="drag-1" class="draggable">
  <p> You can drag one element </p>
</div>
<div id="drag-2" class="draggable">
    <p> with each pointer </p>
</div>

【讨论】：