다른 div 옆에 나타나도록 div 추가

Question

Jquery Drag and Drop을 사용하여 '일치하는'효과를 만들려고합니다.

나는이 HTML이 - 나는 .answerMatch 드래그 앤 .questionMatch에 드롭 할 때 그래서 내가 원하는

<div class="questionMatch"> 
    <text class="matchingText clear">Q1</text> 
    <div class="dropAcceptor floatRight"></div> 
</div> 
<div class="questionMatch"> 
    <text class="matchingText">Q2</text> 
    <div class="dropAcceptor"></div> 

</div> 
<div class="questionMatch"> 
    <text class="matchingText">Q3</text> 
    <div class="dropAcceptor"></div> 

</div> 
<div class="questionMatch"> 
    <text class="matchingText clear">Q4</text> 
    <div class="dropAcceptor"></div> 

</div> 
<div class="answerPane"> 
    <div class="answerMatch floatRight"> 
     <text class="matchingText">Match1</text> 
    </div> 
    <div class="answerMatch"> 
     <text class="matchingText">Match2</text> 

    </div> 

을의 .answerMatch은 그러한 방식으로 .questionMatch에 추가됩니다 .questionMatch 텍스트 옆에 나타납니다.

내가 해봤이 JS

$(document).ready(function(){ 
$(".questionMatch").droppable({accept:".answerMatch", 
    drop:function(event,ui){ 
     $(this).find(".dropAcceptor").append($(ui.draggable)); 
     } 
    } 

    ) 
$(".answerMatch").draggable(); 

});

그리고 요소가 제대로 추가되지만, 옆에있는 .questionMatch 위/위에 표시됩니다.

이 효과를 얻으려면 어떻게해야합니까? 콘솔 PROBLEM- http://jsfiddle.net/qMxxF/1/

UPDATE- 검사를 보여주는

.floatLeft{ 
    float:left; 
} 
.floatRight{ 
    float:right; 
} 
.clear{ 
    clear:both; 
} 

JSFIDDLE을 used- 되 고

CSS JQuery와 드래그 드롭 스타일 ATTR에서의 위치를 ​​추가합니다 보여줍니다 - 나는 것을 제거했습니다, answerMatch가 이제 질문 아래에 표시됩니다. 오른쪽에 표시하려면 CSS 무엇입니까? 플로트를 오른쪽으로하면 브라우저의 오른쪽 끝에 나타납니다.

Answer 1

사용 .after()

$(this).after($(ui.draggable)); 

Answer 2

어떻게 div 태그와 텍스트 태그 교체에 대한 :

<div class="matchingText floatLeft"></div> 

과 :

floatLeft {float:left;} 

또는 응답 형식과 일치하는 :

<div class="QA"> 
<div class="questionMatch floatLeft"><text class="matchingText clear">Q1</text></div> 
<div class="dropAcceptor floatRight"></div> 
</div>