rumiDrag - CSS, jQuery로 만든 드래그 플러그인입니다..
본 문서는 2021년 12월 02일 03시 02분 22초에 최종 수정되었습니다.
- jQeury, CSS로 카드를 Drag하여 이동할 수 있습니다.
- 회원 DB 테이블과 연동하여 개이별 카드 정렬상태를 저장하거나 불러올 수 있도록 합니다.
- 아쉽게도 DB 연동은 사용자가 직접 연동해야 합니다.
- 카드를 움직이기 시작할때, 카드를 이동이 종료된 직후, 카드를 이동을 취소시 이벤트 발생합니다.
- 각 이벤트마다 사용자 코드를 추가하여 원하는 작업을 할 수 있습니다.
Result
JavaScript
HTML
CSS
#rumi-card-drag { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 15px; padding: 0px; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; margin-bottom: 30px; } #rumi-card-drag::after { clear: both; content: ""; display: table; } #rumi-card-drag .rumi-card { position: relative; width: 100%; height: 300px; box-shadow: 0 0 2px 0 rgba(0,0,0,.15), 0 0 2px 0 rgba(0,0,0,.2), 0 6px 6px 0 rgba(0,0,0,.15); transition: box-shadow .2s ease-in-out; } #rumi-card-drag .rumi-card-placeholder { position: fixed; display: inline-block; background: #efefef; border: 2px dotted orangered; top:-100px; left:-100px; } #rumi-card-drag .rumi-card:hover { box-shadow: 0 0 10px 0 rgba(0,0,0,.2), 0 0 10px 0 rgba(0,0,0,.2), 0 10px 10px 0 rgba(0,0,0,.2); } #rumi-card-drag .rumi-card.moving { box-shadow: 0 0 2px 0 rgba(0,0,0,0), 0 0 4px 0 rgba(0,0,0,0), 0 12px 12px 0 rgba(0,0,0,0); } #rumi-card-drag .card-box-header { position: absolute; top: 0; left: 0; cursor: move; width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #bbb; background: #ccc; color: #333; font-size: 14px; font-weight: 400; padding: 0px 10px; } #rumi-card-drag .card-box-header .moveCursor { display: none; position: absolute; top: 0px; right: 15px; font-size: 1.35em; } #rumi-card-drag .card-box-header:hover { color: blue !important; } #rumi-card-drag .card-box-header:hover .moveCursor { display: block; color: blue !important; } #rumi-card-drag .card-box-content { background: #efefef; width: 100%; height: 100%; padding: 50px 5px 5px 10px ; } #rumi-card-drag .card-box-content ul { list-style: decimal-leading-zero; margin-left: 20px; } #rumi-card-drag .card-box-content li { height: 24px; line-height: 24px; cursor: pointer; } #rumi-card-drag .card-box-content li span { display: inline-block; } #rumi-card-drag .card-box-content li .latestDate { width: 70px; color: #888; } #rumi-card-drag .card-box-content li .latestCarNo { width: 73px; text-align: right; color: #dd6666; margin-right: 8px; } #rumi-card-drag .card-box-content li .latestCarName { width: 100px; color: #555; overflow: hidden; white-space: nowrap; vertical-align: bottom; } #rumi-card-drag .card-box-content li:hover { color: #dd5555 !important; }
$(document).ready(function(){ $("#rumi-card-drag").rumiDrag({ topID : 'rumi-card-drag', topClass : 'rumi-card-drag', itemClass : 'rumi-card', dragStart: function(e) { // 드래그 시작 console.log("카드 이동을 시작합니다."); }, dragEnd: function(e) { // 드래그 업데이트 성공 // var cls = e.currentTarget.classList || e.srcElement.classList || e.target.classList; // var uid = e.currentTarget.dataset.id || e.srcElement.dataset.id || e.target.dataset.id; // 카드 "data-id"값을 배열로 반환 var uidArr = $(".rumi-card").map(function() { return $(this).attr('data-id'); }).get(); mainCardUpdate(uidArr); console.log("카드 이동에 성공했습니다."); }, dragCancle: function(e) { // 드래그 취소 console.log("카드 이동이 취소되었습니다."); } }); });
고양이 카드입니다.고양이 카드 내용 1
고양이 카드 내용 2
고양이 카드 내용 3
고양이 카드 내용 4
고양이 카드 내용 5
고양이 카드 내용 6
강아지 카드입니다.강아지 카드 내용 1
강아지 카드 내용 2
강아지 카드 내용 3
강아지 카드 내용 4
강아지 카드 내용 5
강아지 카드 내용 6
호랑이 카드입니다.호랑이 카드 내용 1
호랑이 카드 내용 2
호랑이 카드 내용 3
호랑이 카드 내용 4
호랑이 카드 내용 5
호랑이 카드 내용 6
사자 카드입니다.사자 카드 내용 1
사자 카드 내용 2
사자 카드 내용 3
사자 카드 내용 4
사자 카드 내용 5
사자 카드 내용 6
독수리 카드입니다.독수리 카드 내용 1
독수리 카드 내용 2
독수리 카드 내용 3
독수리 카드 내용 4
독수리 카드 내용 5
독수리 카드 내용 6
돌고래 카드입니다.돌고래 카드 내용 1
돌고래 카드 내용 2
돌고래 카드 내용 3
돌고래 카드 내용 4
돌고래 카드 내용 5
돌고래 카드 내용 6
악어 카드입니다.악어 카드 내용 1
악어 카드 내용 2
악어 카드 내용 3
악어 카드 내용 4
악어 카드 내용 5
악어 카드 내용 6
치타 카드입니다.치타 카드 내용 1
치타 카드 내용 2
치타 카드 내용 3
치타 카드 내용 4
치타 카드 내용 5
치타 카드 내용 6
표범 카드입니다.표범 카드 내용 1
표범 카드 내용 2
표범 카드 내용 3
표범 카드 내용 4
표범 카드 내용 5
표범 카드 내용 6
고양이 카드입니다.
고양이 카드 내용 1
고양이 카드 내용 2
고양이 카드 내용 3
고양이 카드 내용 4
고양이 카드 내용 5
고양이 카드 내용 6
고양이 카드 내용 2
고양이 카드 내용 3
고양이 카드 내용 4
고양이 카드 내용 5
고양이 카드 내용 6
강아지 카드입니다.
강아지 카드 내용 1
강아지 카드 내용 2
강아지 카드 내용 3
강아지 카드 내용 4
강아지 카드 내용 5
강아지 카드 내용 6
강아지 카드 내용 2
강아지 카드 내용 3
강아지 카드 내용 4
강아지 카드 내용 5
강아지 카드 내용 6
호랑이 카드입니다.
호랑이 카드 내용 1
호랑이 카드 내용 2
호랑이 카드 내용 3
호랑이 카드 내용 4
호랑이 카드 내용 5
호랑이 카드 내용 6
호랑이 카드 내용 2
호랑이 카드 내용 3
호랑이 카드 내용 4
호랑이 카드 내용 5
호랑이 카드 내용 6
사자 카드입니다.
사자 카드 내용 1
사자 카드 내용 2
사자 카드 내용 3
사자 카드 내용 4
사자 카드 내용 5
사자 카드 내용 6
사자 카드 내용 2
사자 카드 내용 3
사자 카드 내용 4
사자 카드 내용 5
사자 카드 내용 6
독수리 카드입니다.
독수리 카드 내용 1
독수리 카드 내용 2
독수리 카드 내용 3
독수리 카드 내용 4
독수리 카드 내용 5
독수리 카드 내용 6
독수리 카드 내용 2
독수리 카드 내용 3
독수리 카드 내용 4
독수리 카드 내용 5
독수리 카드 내용 6
돌고래 카드입니다.
돌고래 카드 내용 1
돌고래 카드 내용 2
돌고래 카드 내용 3
돌고래 카드 내용 4
돌고래 카드 내용 5
돌고래 카드 내용 6
돌고래 카드 내용 2
돌고래 카드 내용 3
돌고래 카드 내용 4
돌고래 카드 내용 5
돌고래 카드 내용 6
악어 카드입니다.
악어 카드 내용 1
악어 카드 내용 2
악어 카드 내용 3
악어 카드 내용 4
악어 카드 내용 5
악어 카드 내용 6
악어 카드 내용 2
악어 카드 내용 3
악어 카드 내용 4
악어 카드 내용 5
악어 카드 내용 6
치타 카드입니다.
치타 카드 내용 1
치타 카드 내용 2
치타 카드 내용 3
치타 카드 내용 4
치타 카드 내용 5
치타 카드 내용 6
치타 카드 내용 2
치타 카드 내용 3
치타 카드 내용 4
치타 카드 내용 5
치타 카드 내용 6
표범 카드입니다.
표범 카드 내용 1
표범 카드 내용 2
표범 카드 내용 3
표범 카드 내용 4
표범 카드 내용 5
표범 카드 내용 6
표범 카드 내용 2
표범 카드 내용 3
표범 카드 내용 4
표범 카드 내용 5
표범 카드 내용 6