Html & Script

div 순서 변경 (jquery 드래그 방식)

페이지 정보

본문

jQuery UI 이용 (https://jqueryui.com/sortable/)


<style>

#sortWrap {

padding: 10px;

}

#sortWrap div {

margin: 10px;

padding: 10px 0 10px 20px;

background-color: #FFF;

border: 1px solid #ddd;

cursor: ns-resize;

}

</style>


<script>

$("#sortWrap").sortable({

axis: "y",

containment: "parent",

update: function (event, ui) {

var order = $(this).sortable('toArray', {

attribute: 'data-order'

});

console.log(order);

}

});

</script>


<div id="sortWrap">

<div data-order=1>1</div>

<div data-order=2>2</div>

<div data-order=3>3</div>

<div data-order=4>4</div>

<div data-order=5>5</div>

</div>


관련자료

등록된 댓글이 없습니다.
Today's proverb
인내심을 가져라. 때가 되면 모든 것은 변한다. 조바심이 가을의 영광을 만들거나 살을 에는 겨울을 끝낼 수 는 없다. 근심을 오랫동안 마음에 품고 있으면 그만큼 마음의 평정을 회복하기 어려워진다. 나쁜 생각을 스스로 떨쳐버려라. 나쁜 생각은 영혼의 뿌리를 갉아먹는 악이다.