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 のテキストの横に表示されるように、.answerMatch が追加されるようにしたい。

私はこの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 SHOWING PROBLEM - http://jsfiddle.net/qMxxF/1/

更新-コンソールでの検査は、Jqueryドラッグドロップがスタイルattrに配置を追加することを示しています-私はそれを削除しました.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 に答える