0

私は CSS の第一人者とはほど遠く、ページのメイン コンテンツに position:fixed を使用して上部のコンテナから要素をドラッグしようとすると問題が発生します。メインコンテンツにドラッグするのではなく、一番上のコンテナを下にスクロールするだけです. 説明するのが難しいので、私はフィドルを作りました：

http://jsfiddle.net/4wG5t/11/

ご覧のとおり、要素を上部からページの本体にドラッグすることはできません。また、実際のページではトップ セクションに多くの要素があるため、水平スクロール バーを維持する必要があります。どんな助けでも大歓迎です！

ありがとう！

また、フィドルのコードは次のとおりです。

HTML:

<div class="fieldSectionContainer">
<div class="fieldSection">
    <ul id="fieldList">
        <!-- have loop here -->
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>
        <li class="fieldClass">field value</li>

    </ul>


</div>
</div>


<div style="margin-top:100px">
    content below <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>
    content below  <br/><br/>

</div>

CSS:

.fieldClass {
    display:inline-block;
    background-color:white;
    border-radius:4px;
    width:200px;
    margin:5px 5px;
    padding: 1px 1px;
    text-align:center;
    border:1px solid black;      
}

.fieldClass:hover {
    cursor:move;
 }

 .fieldSectionContainer {
    overflow-y:hidden;
    overflow-x:auto;
    position:fixed !important;
    top:0;
    width:100%;
    height:100px;
 }

 .fieldSection {

    height:100px;
    width:2500px;   
    font-size:10px;
 }
4

3 に答える 3

1

droppable要素のゾーンを決定する必要がありdraggableます。そして、ドラッグされた要素のみを受け入れます。

あなたの最後の師団にIDを与え、それをdraggalbeゾーンにします。

このフィドルを見てください

于 2013-01-25T06:51:39.957 に答える
0

revertをtrueにすると、ボックスは元の位置に戻ります。あなたは何をしようとしているのですか？

スクリプトはまだ完成していません。ドラッグ可能な要素がある場合は、ドロップ機能も必要です。

チュートリアルをお探しですか？.. jqueryのドラッグアンドドロップ機能へのリンクは次のとおりです

または、この同じスレッドを見てください..しかし、スレッドはまだ解決されていません。

于 2013-01-25T05:20:40.280 に答える
0

横スクロールを削除しました。

また、次の点が変更されました。

before-> revert: true after -> revert: false

確認できます jsfiddle.net/4wG5t/13/

于 2013-01-25T07:25:21.207 に答える