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>


관련자료

댓글 0
등록된 댓글이 없습니다.
Today's proverb
지금이 바로 새 출발점. 인생이란 하루하루가 훈련이다. 우리 자신을 훈련하는 터전이다. 실패도 할 수 있는 훈련장이다. 살아있음이 흥겨운 훈련장이다. 지금 이 행복을 기뻐하지 않고 언제 어디서 행복해지랴. 이 기쁨을 발판삼아 온 힘으로 나아가자. 나의 미래는 지금 이 순간 이 곳에 있다. 지금 여기서 노력하지 않고, 언제 어디서 노력하랴. (오히라 미쓰요의 <그러니까 당신도 살아> 중에서)