我需要具有最佳性能的移动列表 我使用了一些jQuety插件但性能不够 请告诉我一个用于拖动高性能的javascript lib 我更喜欢聚合物或反应帆布的方式 谢谢
答案 0 :(得分:1)
iron-list
元素可能对您有用。您可以下载并查看文档here。
答案 1 :(得分:1)
为了在移动设备上获得更好的性能,请将translate转换为translate3d并添加第三个参数0:
'translate3d(' + x + 'px, ' + y + 'px, 0)';
答案 2 :(得分:0)
我找到了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>
&#13;