반응형
가장 간단한 방법은 아무래도 jQuery 라이브러리를 쓰는게...
하지만 내가 작성한 소스에서는 어떤 방법을 써도 먹통이었다ㅜㅜ..
간단한 기능 하나에 시간을 낭비하는 삽질은 언제 끝이날것인가.......
대부분 아래 소스로 구현이 가능하니 이 방법이 먹는다면 아무래도 이게 제일 나은 듯 싶다..
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>
Sortable | jQuery UI
Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable prope
jqueryui.com
내 경우처럼 jQuery 라이브러리가 먹통일 때에는 이 방법을 쓰면 99%는 해결될 듯 하다.
아래의 방법은 javascript로 구현한 드래그 앤 드롭이다.
<!-- html -->
<ul>
<li draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)">1</li>
<li draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)">2</li>
<li draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)">3</li>
<li draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event)">4</li>
</ul>// script
let selected = null
function dragOver(e) {
if (isBefore(selected, e.target)) {
e.target.parentNode.insertBefore(selected, e.target)
} else {
e.target.parentNode.insertBefore(selected, e.target.nextSibling)
}
}
function dragEnd() {
selected = null
}
function dragStart(e) {
e.dataTransfer.effectAllowed = 'move'
e.dataTransfer.setData('text/plain', null)
selected = e.target
}
function isBefore(el1, el2) {
let cur
if (el2.parentNode === el1.parentNode) {
for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
if (cur === el2) return true
}
}
return false;
}
반응형
'Programming > Javascript' 카테고리의 다른 글
| [JavaScript] window.open 새 창을 열 때 WindowName이 같으면 새 창이 겹쳐서 열리는 문제 (0) | 2020.12.30 |
|---|---|
| [JavaScript] Handlebars Template Engine (0) | 2020.08.14 |
| [JavaScript] JSON(JavaScript Object Notation) maven 라이브러리 사용 (0) | 2020.08.12 |
| 동기(Synchronous)와 비동기(Asynchronous )의 개념과 차이점 (0) | 2020.08.02 |
