Как остановить исчезновение изображения с div, в котором оно находится?

Question

Как остановить исчезновение изображения с div, в котором оно находится?

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);
}

rohit_agarwal 09 нояб. 2013, в 20:57

Источник

0

Попробуйте просто сдвинуть в aside#toggle влево, анимируя его левое смещение вместо переключения.
user234932 09 нояб. 2013, в 19:27

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Попробуйте просто сдвинуть в aside#toggle влево, анимируя его левое смещение вместо переключения.

rohit_agarwal · Answer 1 · 2013-11-09T18-34-00.000Z

Попробуйте этот встроенный параметр 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>

найти соответствующую документацию здесь