본문 바로가기

개발일지

jQuery tablednd 플러그인을 사용한 테이블을 드래그앤드롭

반응형


얼마전  테이블을 드래그앤드롭에 관한 글을 쓰고 참조하기 좋은 플러그인을 찾아 소개합니다.


github 주소는 다음과 같고요 JQuery와 같이 쓸수 있습니다.

https://github.com/isocra/TableDnD


$("#tableId").tableDnD();


$("#tableId").tableDnD({
	    onDragClass: "myDragClass",
	    onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Row dropped was "+row.id+". New order: ";
            for (var i=0; i<rows.length; i++) {
                debugStr += rows[i].id+" ";
            }
	        $(#debugArea).html(debugStr);
	    },
		onDragStart: function(table, row) {
			$(#debugArea).html("Started dragging row "+row.id);
		}
	});

onDrop 이밴트가 실행 되지 않는 경우가 있는대요 각 로우에 아이디가 없으면 작동 하지 않더군요


비슷한경우로 JQuery로 뒤늦게 들어온 로우는 적용 되지 않으니 로우를 추가하고 플러그인을 적용 하시면 됩니다.

반응형