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 回答