Question

我已经制作了这个site/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);
}

Answer 1

尝试使用这个内置的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>

查找相关文档here

如何阻止图像消失与它的div？

1 个答案: