-4

I need Draggable list for mobile with best performance
I use some jQuety plugin but not enough performance
Please tell me a javascript lib for dragging with high performance
I prefer polymer or react canvas way Thank you

1
  • why i have -1 point ?!!
    – Ali.MD
    Jul 14, 2015 at 13:20
1

The iron-list element might be of use to you. You can download it and see the documentation for it here.

1
  • I need draggable items, change item position
    – Ali.MD
    Jul 14, 2015 at 22:00
1

For better performance on mobile, change translate to translate3d and add a third argument of 0:

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

I found interactjs. It is the best performance I ever saw!

// 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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.