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
자신을 불행한 존재라고 생각하는 사람은 아직도 더 불행해질 여지가 남아있다. 아주 작은 일에도 큰 기쁨을 느끼는 사람에게는 그 어떤 불행도 위력을 상실해 버리고 만다. 그러나 아주 작은 일에도 기쁨을 느낄 수 있는 경지에 이르기까지는 어차피 여러 가지 형태의 불행을 감내하지 않을 수가 없다. 불행이란 알고 보면 행복이라는 이름의 나무 밑에 드리워진 행복만한 크기의 나무그늘 같은 것이다. (이외수 "흐린 세상 건너기" 中에서)