Question

我正在尝试使用Jquery Drag and Drop创建一个“匹配”效果。

我有这个HTML -

<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 -

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

JSFIDDLE显示问题 - http://jsfiddle.net/qMxxF/1/

更新 - 控制台中的检查显示Jquery拖放在样式attr中添加了定位 - 我已将其删除，而answerMatch现在出现在问题下方。是什么让它看起来是正确的？当我向右浮动时，它出现在浏览器的右端。

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>

附加一个div，使其出现在另一个div旁边

2 个答案: