1

おそらくこれは非常に単純な質問ですが、私はJqueryの初心者です...

次のスクリプトがあります。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">/script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js">

    </script>

    <script>
         $(function() {

            $('li').draggable({
                containment: 'document',
                revert: true
            });


            $("#config").droppable({
                drop: function(event, ui) {
                $(ui.draggable).appendTo( "#schub" );
                }
            });

        });


    </script>

そして、これが私の体に含まれるものです：

    <div style="width:1800px; height:600px; background-color:#efefef;padding:10px;" >
    <div style="float:left; width:1250px; height:580px; border:1px solid grey; padding:10px;" >
        <div id="config" style="background-color:blue; border:1px solid black; width:700px; height:500px;">

            <ul id="schub" style="width:300px;  height:500px;"></ul>

        </div>
    </div>

<div style=" background-color:red;float:left; width:490px; height:580px; border:1px solid grey; margin-left:10px;padding:10px;" id="menu">
    <ul class="category">

        <li  class="dragg"  style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
        </li>

        <li class="dragg" style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
        </li>

        <li  class="dragg"  style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
        </li>

    </ul>

</div>

今私の問題:灰色<li>を赤から<div>青にドラッグできるようにしたい<div>。実際には機能しますが、ドロップすると、グレー<li>は常にウィンドウの外側から青<div>に戻ります。なぜそれが起こっているのですか?? <li>ドロップした場所から元に戻る可能性はありますか?

どうもありがとうございました!

4

1 に答える 1

1

私は解決策を見つけたと思います：

問題は、ge が追加される前に彼が持っていた css スタイルを使用して、青い div<li>の新しいものに追加されていることです。<ul>

<li>をnewにドロップした後<ul id="schub">も、Jquery からの css が残っています。これは約 left:-1000px; です。<li>（右から左にドラッグするため、それが得られます）。次に、新しいulに追加されます。ブラウザは、これがwith left:-1000px;<li>の en 要素であると考えます。<ul id="schub">窓の外にあるもの。定義 revert:true; が に設定されている<li>ため、ウィンドウの外側から に戻ります<ul id="schub">。

実際には解決策は見つかりませんでしたが、回避策は次のとおりです。

定義ヘルパー 'clone' を に追加でき<li>ます。このようにして、オリジナルのクローンを取得します。実際には、ドロップした時点から元に戻すのでは<ul>なく、ウィンドウの外側から元に戻すことなく、新しいものに追加されます。

于 2012-04-14T13:45:14.430 に答える