要素の自由なドラッグと並べ替えを実装するための jQuery コード-jsチュートリアル-php.cn

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

不言

リリース： 2018-07-17 17:49:29

オリジナル

1535 人が閲覧しました

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

まず、要素のドラッグを実装するためのプラグイン 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=&#39;&#39; ( i = 0; i <= 10; i++(i%2!=0+=&#39;<p class=" gred">&#39;+i+&#39;</p>&#39;+=&#39;<p class=" ccc">&#39;+i+&#39;</p>&#39;&#39;.gridly&#39;)[0]).append(dom);  
     reordering =  reordered =  arrdom=  array=[]; 
         $.each(arrdom,&#39;.gridly&#39;
      $(&#39;.gridly&#39;100, 
        gutter: 20, 
        columns: 7

ログイン後にコピー

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