要素の自由なドラッグと並べ替えを実装するための jQuery コード

並べ替えは要素を上下に移動することで実現できますが、柔軟性が十分ではなく、比較的厳格であり、目的の並べ替えの目的をすぐに達成することはできません。ここでは並べ替えたい位置に素早くドラッグ＆ドロップする方法を説明します。

まず、要素のドラッグを実装するためのプラグイン Gridly.js を導入する必要があります。

  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery.gridly.js" type="text/javascript"></script>
  <link href="css/jquery.gridly.css" rel="stylesheet" type="text/css" />
<style>
  .gred {
    width: 90px;
    height: 100px;
    background: red;
    font-size:20px;
    text-align: center;
  }

  .ccc {
    width: 90px;
    height: 100px;
    background: #ccc;
    text-align: center;
    font-size:20px;
  }
  .gridly{
    position: relative;
    width: 800px;
    height: 200px;
    overflow: auto;
  }

</style>
<p class="gridly"></p>

次の単純な js コード行で、必要な機能を実現できます:

 ( dom='' ( i = 0; i b3b20a38a8e8b1e4835a7696ab355ee7'+i+'94b3e26ee717c64999d7867364b1b4a3'+='08925a86548b2a1e02cb011316f09613'+i+'94b3e26ee717c64999d7867364b1b4a3''.gridly')[0]).append(dom);  
     reordering =  reordered =  arrdom=  array=[]; 
         $.each(arrdom,'.gridly'
      $('.gridly'100, 
        gutter: 20, 
        columns: 7

その効果は以下のとおりです:

以下の説明: このプラグインは、非常にシンプルで使いやすいです。設定表示 列数や行間が関係ない場合は、gridly.js のソースコードを開いて、以下のメソッドを見つけて設定するとよいでしょう。

関連する推奨事項:

ドラッグソート効果を作成するjQueryドラッグソートプラグイン(ソースコードのダウンロード付き)_jquery

jqueryドラッグソートの簡単な実装方法(拡張版)_jquery

以上が要素の自由なドラッグと並べ替えを実装するための jQuery コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。