마우스로 드래그 앤 드롭 (Sort)

 

마우스로 정렬 (Sort)

 

마우스로 드래그 앤 드롭

 

JS로 마우스를 이용해서 드래그 앤 드랍 하는 방법 과 정렬한 순서를 얻어서 백엔드로 넘기기 전까지 과정 입니다.

 

개인적인 참고용이라 두서가 없습니다. 혹시 본다면 참고만 하세요.

 

 

데모 : https://jsbin.com/yunakeg/edit?html,css,js,output 

JS Bin

 

소스 : http://sortablejs.github.io/Sortable/

SortableJS

 

참고 : https://github.com/SortableJS/Sortable

GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework requ

 

참고 : /admode/module/admcms/include/eduterms.list.php

 

 <!-- 드래그 & 드롭 -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js" integrity="sha512-zYXldzJsDrNKV+odAwFYiDXV2Cy37cwizT+NkuiPGsa9X1dOz04eHvUWVuxaJ299GvcJT31ug2zO4itXBjFx4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 <script type="text/javascript" language="javascript" charset="utf-8">
 //var listWithHandle = document.getElementById('rellist');
 
 //드래그 & 드롭
Sortable.create(listWithHandle, {
  handle: '.my-handle',
  animation: 150,
  // Element dragging ended
  onEnd: function (e) {
  //드롭했을때 이벤트 실행
  	//var itemEl = e.item;  // dragged HTMLElement
  	//console.log(e.newIndex+1);
  	//updateSort();	
  }
});


//순서 저장
function field_position_form_check(form){
	var menulist = "";
	$('.rel_list').each(function(index, item){
		if("" != menulist)
			menulist += "&";
		menulist += $(this).attr("id").replace(/item-/g, '');
	});
	
	form.menulist.value = menulist;
	console.log(menulist);
	
	//alert(menulist);
	if(form.menulist.value==""){
		alert("위치를 변경해주세요.");
		return false;
	}
	return true;
}
</script>

//===============================================================================

<ul id="rellist">
	<li id="item-2pos1" class="rel_list">
		<div class="field1"><input type="checkbox" name="select_check_no[]" value="2"/></div>
		<div class="field2">1</div>
		<div class="field3">서비스 이용 동의</div>
		<div class="field4">출력</div>
		<div class="field5">
			<a href="" class="btn_s">수정</a>
			<a href="#delete_check" onclick="delete_check('olym=edut'); return false;" class="btn_s">삭제</a>
		</div>
	</li>
	<li id="item-3pos2" class="rel_list">
		<div class="field1"><input type="checkbox" name="select_check_no[]" value="3"/></div>
		<div class="field2">2</div>
		<div class="field3">개인정보 수집 및 이용</div>
		<div class="field4">출력</div>
		<div class="field5">
			<a href="" class="btn_s">수정</a>
			<a href="#delete_check" onclick="delete_check('olym=edut'); return false;" class="btn_s">삭제</a>
		</div>
	</li>
	<li id="item-4pos3" class="rel_list">
		<div class="field1"><input type="checkbox" name="select_check_no[]" value="4"/></div>
		<div class="field2">3</div>
		<div class="field3">개인정보 마케팅 활용 동의</div>
		<div class="field4">선택</div>
		<div class="field5">
			<a href="" class="btn_s">수정</a>
			<a href="#delete_check" onclick="delete_check('olym=edut'); return false;" class="btn_s">삭제</a>
		</div>
	</li>
</ul>

<div class="txR mgT10">
  <form id="field_position_form" name="field_position_form" method="post" action="<?=($page_action_controller);?>" onsubmit="return field_position_form_check(this)">
    <input type="hidden" name="olym" value="<?=($olym);?>" />
    <input type="hidden" name="mode" value="sort" />
    <input type="hidden" name="uid" value="<?=($site['no']);?>" />
    <input type="hidden" name="menulist" value="" />
    <input type="submit" value="위치변경하기" class="btn_m_input" />
  </form>
</div>