2012-05-22 4 views
11

jQueryUI의 draggables/dropables를 사용하여 drop의 대상 요소로 드래그되는 항목을 어떻게 추가합니까? jQuery UI가 현재 작동하는 것처럼 보입니다. 절대 위치 지정을 통해 화면에서 항목을 움직이는 것입니다. 불행하게도,이 기능은 제출시 값의 위치를 ​​얻을 수 없으므로 양식 제출을 쓸모 없게 만듭니다.JQuery UI - Droppable에 Draggable 추가

미리 감사드립니다. 모든 항목/포인터를 알려주세요!

+1

에서

$(myDraggable).draggable({ helper:"clone", containment:"document" }); $(myDroppable).droppable({ drop:function(event, ui) { ui.draggable.detach().appendTo($(this)); } }); 

작동 예는 실제로 새로운 위치를 반영하기 위해 DOM을 수정; 나는 그것이 (AJAX를 통해) 목록을 업데이트하고 '완료'콜백에서 새 div 순서를 검색하는 것이기 때문에 알 수 있습니다. 너 뭐하려고? – Sp4cecat

+0

정확히 무엇을하려고합니까? draggble 대신 sortable을 찾고있는 것처럼 들리네. http://jqueryui.com/demos/sortable/ –

답변

23

제대로 이해했다면 드래그 한 요소를 현재 상위 요소에서 분리하고 새 요소에 추가해야합니다. 도우미를 사용하여 끌기를 할 수 있으므로 원본 요소는 영향을받지 않습니다. 드롭하면 분리하여 대상에 추가합니다 (@Oleg 및 @Brian에게 감사드립니다). 내 경험에 jsFiddle

+0

도움 주셔서 대단히 감사합니다! 당신이 이것을 쓰는데 걸린 시간과 노력에 정말 감사드립니다! – user1110302

+0

이것은 매우 유용합니다. 감사합니다. –

+2

전역 변수를 사용할 필요가 없습니다. - ui.helper는 드래그 가능한 jq 객체입니다. 시작/중지 메소드를 없애고 ui.helper.detach(). appendTo ($ (this))이어야합니다. – Oleg

관련 문제