선택 상자에서 선택한 모든 요소의 복사본을 드래그 할 수 있습니까?

Question

필자는 선택 목록 웹 인터페이스를 가지고 있습니다. 한 쌍의 선택 요소와 한 쌍의 단추 (왼쪽 화살표와 오른쪽 화살표)가 있습니다. 사용자는 왼쪽 열의 옵션 중 하나를 선택하고 오른쪽 화살표를 클릭하여 두 열 사이에서 항목을 이동할 수 있습니다.

이제 개선 요청이 있습니다. 누군가가 단추를 클릭하는 대신 두 열 사이에서 항목을 끌어다 놓을 수 있기를 바랍니다. 처음 두 개의 셀렉트 박스를 설정했을 때의 문제점은 드래그를 시작하기 위해 강조 표시된 옵션 중 하나를 클릭하자 마자 선택된 다른 모든 옵션의 선택이 해제되었습니다. jQuery를 사용하여 mousedown 이벤트 핸들러를 이벤트 상자에서 preventDefault()를 호출하는 선택 상자와 각 개별 옵션에 연결했지만 충분하지 않습니다. Firefox 3에서 클릭 옵션은 즉시 포커스를 잃지 만 다른 모든 옵션은 여전히 ​​선택 취소되어 있으며 IE6 (나는 여전히 유감스럽게도 지원해야 함)에서 전혀 차이가 없습니다.

그래서 목록 요소 나 div 등을 사용하여 선택 상자의 합리적인 팩시밀리를 만들 수 있다고 생각했습니다. 나는 합리적인 것 - Firefox에서 작동하는 것을 만들 수 있지만, IE6에서는 pseudo-select 오브젝트의 요소를 Shift- 클릭하면 (옵션 범위를 선택하기 위해) IE는 클릭 한 마지막 위치. 다시 말하지만, preventDefaulting mousedown, mouseup 및 click 핸들러를 관련된 모든 요소에 연결했지만 도움이되지 않습니다.

나는 원래 선택 상자와 내 가상 선택 개체에 투명 div를 오버레이하여 마우스 클릭을 가로 채고 수동으로 선택 항목을 관리하려고 시도했지만 IE에서는 작동하지 않습니다. 선택 상자를 사용하는 경우 클릭이 선택 항목을 변경하는 것을 방지 할 수 없으며 선택 요소처럼 보이는 텍스트를 사용하면 Shift 키를 누른 상태에서 텍스트 범위를 선택할 수 없습니다.

몇 가지 일반적인 해결책이 있습니까, 아니면 운이 나빴나요?

Answer 1

나는 "선택할 수없는"속성으로가는 끝났다.

Answer 2

체크 아웃이 개 연결 정렬 목록과 JQuery와 UI 정렬 가능한 : 그것은 단지 http://jqueryui.com/demos/sortable/#connect-lists

는 :

$('.selector').sortable({ connectWith: '.otherlist' });