sortable

tr 로  y축 이동 샘플

	$('.sortlist').sortable({
		handle: '.moviemove1',
		axis: 'y',
		opacity: 0.7,
        	helper: function(e, ui) {
              		ui.children().each(function(index) {
            	    $(this).width($(this).width());
                 });
            return ui;
        },        
		start: function(e, ui) {
			ui.item.addClass('current');
		},
		stop: function(e, ui) {
			ui.item.removeClass('current');
			updateMoviesort($(this));
		}

	}).disableSelection();


<table>
	<tbody class="sortlist sortable">
        <tr>
            <td  class="col-move">
            	<a href="#" class="icon_button sorter move moviemove1">
                <i class="up">상</i><i class="down">하</i></a>
            </td>
        </tr>
	</tbody>
</table>

 

 

 

li 좌우로 움직이기

	$('.ui-sortable2').sortable({
		handle: '.ui-sortable-handle2',
		opacity: 0.7,
		helper: "clone", // 드래그 시 복사본을 만들어 이동 가능하게 함
		start: function (e, ui) {
			ui.item.addClass('current');
		},
		stop: function (e, ui) {
			ui.item.removeClass('current');
			updateImageSortcnt();
		}
	}).disableSelection();
	console.log(typeof $().sortable);
    
    $('body').on('mousedown', '.ui-sortable-handle2', function (e) {
		e.preventDefault(); // 클릭 시 기본 동작 제거 (드래그 방해 요소 제거)
	});
    
    <li>
    	<ul class="hide sortable ui-sortable2">
    		<div class="caption"><a href="#" class="icon_button sorter move ui-sortable-handle2">
            <i class="left">좌</i><i class="right">우</i></a></div>
   
    	</ul>
	</li>

 

 

체크포인트 :

sortable을 선언하는 지점,   ->> 해당지점 클래스에 sortable 주기 

handle을 선언하는 지접     ->> 움직임이 필요한곳의 클래스를 handle에주기

 

기본이벤트 삭제해주기