附加一個div，使其出現在另一個div旁邊

我試圖使用Jquery拖放來創建「匹配」效果。附加一個div，使其出現在另一個div旁邊

我有這個網站 -

<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，該.answerMatch追加到.questionMatch以這樣一種方式，它出現在.questionMatch文本旁邊。

我試過這個JS

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

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

}）;

並且正確地附加了元素，但它看起來好像在.questionMatch /之上。

我該怎麼做才能達到這個效果？

CSS，這就是BEING used-

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

的jsfiddle顯示控制檯PROBLEM- http://jsfiddle.net/qMxxF/1/

最新情況：檢查顯示，jQuery的拖放添加了一個風格ATTR定位 - 我已刪除了， answerMatch現在出現在問題的下面。什麼是CSS讓它看起來在右邊？當我做一個正確的浮動時，它會出現在瀏覽器的右端。

來源

2012-12-03 praks5432

你可以發佈一些CSS，也許建立一個jsfiddle？ – Horen

我可以在JSfiddle中放入Jquery UI嗎？在任何情況下，我都看不到這樣的選項 - 添加CSS – praks5432

是的，您可以將jQuery放在jsfiddle中。在左側選擇它。 – Horen

使用.after()

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

來源

2012-12-03 20:05:56

如何使用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>

來源

2012-12-03 20:10:41 Christophe

仍然出現在頂部，而不是旁邊的元素 – praks5432

事情是 - 當我這樣做時，問題開始出現在同一行，這不應該發生 – praks5432

你試過我的答案的第二部分？它應該將問題分開保存。 – Christophe

附加一個div，使其出現在另一個div旁邊

回答

相關問題