jQuery 드래그 가능한 퀴즈 박스

나는 포럼을 읽고 결과없이 예제를 보는 데 많은 시간을 보냈습니다. 나는이 작업을 수행 할 필요가하십시오 나는 6 상자를jQuery 드래그 가능한 퀴즈 박스

[IMG] [IMG] [IMG] [IMG] [IMG] [IMG]

6 빈 상자 (상자 만 IMG가되지 않음) :

{. } {. } {. } {. } {. } {. }

빈 상자에 img를 사용하여 요소를 드래그 앤 드롭하는 방법은 무엇입니까? 그러나 그 안에 만, 다른 곳에서는 떨어지지 않아야합니다. 그리고 난 드래그 된 요소의 수를 얻어야합니다. 그 상자는 빈 상자에 떨어질 수 있습니다, 그건 중요하지 않습니다. 나는 HTML5 끌어서 놓기를 시도하고 그것은 매우 나빴다. 누군가 나를 도울 수 있습니까? 가장 좋은 해결책은 동일한 문제 또는 전체 코드에 대한 링크 여야합니다.

고맙습니다.

출처

2014-10-30 Daniel Rossko Rosa

이걸보세요 : http://jqueryui.com/droppable/#accepted-elements, 그것을 편집해서 원하는대로 만들 수 있습니다. – STP38

을 원하는대로 만들 수 있지만, 아무 곳에 나 놓을 수 있습니다. 나는 그 빈 상자에만 필요합니다. –

조금 스타일을 지정해야하지만 이것이 제대로 작동해야한다고 생각하십니까? http://jsfiddle.net/wfG3L/451/는 그냥 .Card의 div의에 이미지를 추가하고 사업부가 낙하 할 경우와 상자가 여전히 빈 상태 (empty)의 경우는

$(".stackDrop1").droppable({ 
tolerance: "intersect", 
accept: ".card", 
activeClass: "ui-state-default", 
hoverClass: "ui-state-hover", 
drop: function(event, ui) { 
    if ($('.stackDrop1').is(':empty')){ 
     $(this).append($(ui.draggable)); 
    } 
} 
});

이 검사를 작동합니다.

출처

2014-10-30 11:52:54 Stefan

+ 만약 내가 할 수 있다면 10 000 :) 내 인생을 구 해주셔서 대단히 감사합니다 :)하지만 하나의 질문, 그 요소를 떨어 뜨린, 그 빈 상자에 정확히 넣어하는 방법? –

무엇이 원인인지 모르겠지만 CSS 스타일을 사용하면 jquery가 문제가되지 않도록 쉽게 해결할 수 있습니다. – Stefan

그리고 드롭 영역에 "붙여 넣기"한 후 이동을 차단할 수 있습니까? 그것을 떨어 뜨리고 더 이동하지 않으려 고합니다. (클릭만으로 되돌아 가야합니다.) –

jQuery 드래그 가능한 퀴즈 박스

답변

관련 문제