0

私はこのサイト/webappを作成しました。タマネギをページの空白からドラッグしてページのどこにでもドラッグできますが、左側のボタンをクリックすると、divの残りの部分があった/あったときに消えますユーザーが白いボックスからドラッグしたときに消えないようにするにはどうすればよいですか?

私はjQueryを使ってスライドさせたり入れたりしました：

    $( "#button" ).click(function() {
      $( "#toggle" ).toggle( "slide" );
    });

そしてそれを機能させるためのこのhtml：

   <button id="button">&lt;-&gt;</button>
    <aside class="ingredients" id="toggle">
        <section class="center">
            <section class="onion" id="draggable"></section>
            <section class="butter"></section>
        </section>
    </aside>

セクションは背景画像を使用して表示されます。

.onion {
    background-image: url(onion.png);
    margin: 20px auto -300px auto;
}

.choppedonion {
    background-image: url(choppedonion.png);
}
4

1 に答える 1

0

ドラッグ用の組み込みの JQuery オプションを試してください。

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Draggable </title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

        <style>
            #draggable { width: 150px; height: 150px; padding: 0.5em; }
        </style>
        <script>
            $(function() {
            $( "#draggable" ).draggable();
        });
        </script>
    </head>
    <body>
        <div id="draggable" class="ui-widget-content">
            <p>Drag me around</p>
        </div>
    </body>
</html>

関連ドキュメントはこちら

于 2013-11-09T19:40:18.630 に答える