More than 5 years have passed since last update.

おすすめのJSドラッグ＆ドロップライブラリ

Posted at 2018-04-23

Packery（パッケリー？）

つかいかた

CDNで読み込み

<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>

<style>
  .grid-item { width: 25%; }
  .grid-item--width2 { width: 50%; }
</style>

<body>
  <div class="grid">
    <div class="grid-item">...</div>
    <div class="grid-item grid-item--width2">...</div>
    <div class="grid-item">...</div>
  </div>
  <script>
    var $grid = $('.grid').packery({
      itemSelector: '.grid-item',
      // columnWidth helps with drop positioning
      columnWidth: 100
    });

    // make all grid-items draggable
    $grid.find('.grid-item').each( function( i, gridItem ) {
      var draggie = new Draggabilly( gridItem );
      // bind drag events to Packery
      $grid.packery( 'bindDraggabillyEvents', draggie );
    });
  </script>
</body>

メイソンリーも対応していて、アニメーションもなめらか。

shopify draggable

Shopifyがつくったらしい

公式サイト
https://shopify.github.io/draggable/

interact JS

DnDだけでなく、様々なインタラクティブ動作に対応。

公式サイト
http://interactjs.io/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up