0

我正在尝试使用 Jquery 拖放创建“匹配”效果。

我有这个 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/not 旁边的上方。

我该怎么做才能达到这个效果？

正在使用的 CSS-

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

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

更新-控制台中的检查显示 Jquery 拖放在样式属性中添加了定位-我已将其删除，并且 answerMatch 现在出现在问题下方。使它显示在右侧的 css 是什么？当我向右浮动时，它会出现在浏览器的右端。

4

2 回答 2

1

利用.after()

$(this).after($(ui.draggable));
于 2012-12-03T20:05:56.940 回答
0

如何用 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-03T20:10:41.667 回答