요소의 자유로운 드래그 및 정렬을 구현하는 jQuery 코드-JS 튜토리얼-php.cn

요소의 자유로운 드래그 및 정렬을 구현하는 jQuery 코드

不言

풀어 주다： 2018-07-17 17:49:29

원래의

1552명이 탐색했습니다.

요소를 위아래로 움직여 정렬을 수행할 수 있지만 유연성이 부족하고 상대적으로 단단하며 원하는 정렬 목적을 빠르게 달성할 수 없습니다. 아래에서는 원하는 정렬 위치로 빠르게 드래그 앤 드롭하는 방법을 설명합니다.

먼저 요소 드래그를 구현하기 위해 플러그인 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

로그인 후 복사

효과는 아래와 같습니다: