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>
관련자료
-
링크
등록된 댓글이 없습니다.
