2011-11-18 3 views
3

jQuery 정렬 식 상호 작용과 단추 세트 위젯을 결합하여 정렬 가능한 단추 집합을 만들려고합니다. 다음을 시도하는 jfiddle입니다 : http://jsfiddle.net/HK7rX/3/.JQuery UI Sortable Buttonset

첫 번째 것은 buttonset을 호출하고 동일한 div에서 정렬 할 수 있습니다. 그것은 다소 효과가 있지만 버튼을 움직이려하면리스트가 점프하고 첫 번째 또는 마지막 위치로 버튼을 이동하기가 어렵습니다.

그런 다음 각 li에 버튼이있는 ul을 만들려고했지만 정렬 가능한 부분이 전혀 작동하지 않습니다. 나는 버튼 클릭 이벤트가 정렬 가능한 이벤트에 대한 호출을 무시하는 것과 관련이 있다고 추정한다.

위와 똑같은 작업을 시도했지만 성능이 더욱 떨어졌습니다.

첫 번째 시도는 "최고"로 작동하지만 여전히 몇 가지 문제가 있습니다. 버튼 세트의 혼합을 얻는 방법에 대한 아이디어 (버튼이 라디오 버튼의 역할을하도록)를 다른 순서로 움직일 수 있습니까?

답변

3

첫 번째 예제부터 시작하여 here으로 시작했습니다. 내가 한 일은 모든 라디오 입력/라벨 쌍을 자신의 떠 다니는 부서에 넣는 것입니다. 그러면 정렬이 부드럽게됩니다. 나는 비슷한 분명히 답이없는 문제를 찾으려고 노력이 질문에 건너 온 이후

지금 당신이 할 필요가, 밖으로 정렬 둥근 모서리 버튼 : 그것은 가치가 무엇인지에 대한

+0

:)를 해결하기 위해 노력했다의 다른 부분을 대답부터

$("#radioset").sortable({ stop:function(event, ui) { $("#radioset .ui-corner-right").removeClass("ui-corner-right"); $("#radioset .ui-corner-left").removeClass("ui-corner-left"); $("#radioset label:first").addClass("ui-corner-left"); $("#radioset label:last").addClass("ui-corner-right"); } }); 

당신에게 스티브 윌크스 감사드립니다. 난 그냥 작동하도록 노력하고 있었고 div 요소에 대한 인라인 스타일로 작업하고 있었고, 외부 CSS 파일이 아닌 내부 div에 인라인 부동 스타일을 지정하면 어떤 이유로 든 펑키 한 동작을 얻을 수있었습니다. 그것을 확인하십시오 : http://jsfiddle.net/7nZRM/ –

+0

얼마나 이상한가! CSS 때때로 나를 당황하게합니다 :) –

2

에있다 - 방법을 정렬하려면 둥근 모서리 - 여기 내가 생각해내는 것이 있습니다. 더 효율적인 방법이있을 것이라고 확신합니다.하지만이 방법이 효과적입니다. 당신의 대답은 내가 좋은 작품

+0

당신을 진심으로 환영합니다! :) –