요소를 위아래로 움직여 정렬을 수행할 수 있지만 유연성이 부족하고 상대적으로 단단하며 원하는 정렬 목적을 빠르게 달성할 수 없습니다. 아래에서는 원하는 정렬 위치로 빠르게 드래그 앤 드롭하는 방법을 설명합니다.
먼저 요소 드래그를 구현하기 위해 플러그인 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!