jQuery의 테이블 행 드래그

jQuery (및 UI)를 사용하여 테이블 행을 테이블 밖으로 드래그하여 일부 요소에 드롭 할 수 있기를 원합니다. 여러 개의 선택한 노래를 드래그 할 때 iTunes가 작동하는 방식과 마찬가지로 행 자체가 테이블을 벗어나서는 안됩니다. 테이블 형식의 데이터이므로 표를 사용해야하며 이미 표 정렬 플러그인이 있습니다.jQuery의 테이블 행 드래그

어떻게하면 좋을까요?

출처

2009-08-23 mikeycgto

여기에는 jQuery 플러그인이 있습니다. http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/ – mikeycgto

을 참조하십시오.이 게시물은 오래되었지만 tnd 테이블 플러그인은 다음 테이블과 함께 작동하지 않습니다. thead와 tbody, 헤더 행을 무시하고 싶다. 여러 사람들이 분기 된 버전을 작성했습니다. 연결된 tnd의 주석에 링크 된 한 버전은 실제로 프로퍼 포맷 된 테이블과 작동합니다. 오직 단점은 내 모든 드롭 다운을 비활성화합니다. 테이블에 아무런 컨트롤도 없다면, 분기 된 버전 인'http : // riouxsvn.com/svn/jquery-tablednd/trunk /'는 실제로 잘 작동하는 것처럼 보입니다. 프로젝트는 현재 GitHub의'https : // github.com/isocra/TableDnD /'에도 있지만 최신 버전은 아닙니다. – Nope

JQuery UI의 droppable()을 사용하면 허용 가능한 draggable()이 해당 droppable()에 놓일 때마다 실행할 함수를 정의 할 수 있습니다. this page의 데모가 코드 작성 방법을 이해하는 데 도움이되었습니다. '소스보기'를 클릭하여 코드를 확인하십시오. 특히이 부분 :

$gallery.droppable({ 
    accept: '#trash li', 
    activeClass: 'custom-state-active', 
    drop: function(ev, ui) { 
    recycleImage(ui.draggable); 
    } 
});

당신은 예를 들어 당신이 원하는 행을 복제 할 수있는 드롭 기능을 만들 수 있지만, 원래 위치에서 삭제해서는 안된다.

출처

2009-08-23 14:33:58

그래, 그 droppable 측면은 문제가되지 않습니다. 테이블 바깥 쪽에서 테이블 행을 드래그 가능하게 만들 수는 없습니다. – mikeycgto

일반 자바 스크립트로 작성된이 플러그인을 사용하면 행과 열을 끌어서 정렬 할 수 있습니다. https://sindu12jun.github.io/table-dragger/

출처

2016-12-22 07:47:20 markjiang

jQuery의 테이블 행 드래그

답변

관련 문제