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