Форум

monah_79 · #1 (**permalink**) 09.04.2021, 20:32

Необходимо реализовать следующую задачу, при перетягивании картинки в область корзины должна проигрываться анимация...В архиве есть видео того, как все должно выглядеть...Хотя бы подскажите что смотреть, читать, какие темы. Всем спасибо!!!

рони · #2 (**permalink**) 09.04.2021, 22:08

monah_79,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <title>StarTrackr!</title>
    <link rel="stylesheet" href="dragdrop.css" media="screen">
    <link rel="stylesheet" href="jquery-ui.css">
    <style>
        #photo-grid img {
            width: 100px;
        }
        .trash {
            position: relative;
        }
        #trash-image {
            display: block;
            background-image: url(images/epuff.png);
            background-repeat: no-repeat;
            background-size: cover;
            width: 128px;
            height: 120px;
            background-position: 0 -768px;
            top: -40px;
            left: -20px;
        }
        .trash.drop-hover{
            border: 1px solid #006400;
        }

    </style>
</head>
<body>
    <section id="container">
        <header id="header">
            <h1>**************</h1>
        </header>
        <div id="content">
            <h2>Images</h2>
            <div class="trash">
                <div id="trash-image" src="images/epuff.png" alt="" />
            </div>
            <img src="images/trash.png" alt="trash" />
            <span id="trash-title">Drag images here to delete</span>
        </div>
        <div id="photo-grid">
            <img src="images/fader_100.jpg" />
            <img src="images/beau_100.jpg" />
            <img src="images/glenda_100.jpg" />
            <img src="images/mofat_100.jpg" />
        </div>
        </div>
        <footer id="footer">
            <p>
            </p>
        </footer>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $('#photo-grid img').draggable();
            $('.trash').droppable({
                hoverClass: 'drop-hover',
                drop: function(event, ui) {
                    $(ui.draggable).hide();
                    let {top: t, left : l} = $('.trash').offset();
                    let {top, left} = ui.offset;
                    $('#trash-image').css({top: top - t - 10, left: left - l - 20});
                    $({
                            numberValue: 0
                        })
                        .animate({
                            numberValue: 6
                        }, {
                            duration: 600,
                            easing: "linear",
                            step: function(val) {
                                val = (-Math.round(val) * 128) + 'px';
                                $('#trash-image').css({
                                    'background-position-y': val
                                })
                            }
                        })
                }
            })
        })
    </script>
</body>
</html>

monah_79 · #3 (**permalink**) 10.04.2021, 16:50

Не понимаю как убрать вот это изображение, когда загружается html страница.... И еще вопрос, а как реализовать анимацию, чтобы она проигрывалась именно в том месте, где я отпускаю картинку?

рони · #4 (**permalink**) 10.04.2021, 17:30

monah_79,
вы точно скопировали всю страницу целиком? нет в коде картинки, она заменена на div. в этом div сдвигается фон, последовательно показывается 5 картинок из которых состоит фон. в целом это тоже самое что gif.

рони · #5 (**permalink**) 10.04.2021, 17:45

Сообщение от monah_79

в том месте, где я отпускаю картинку

добавлено, смотрите код снова #2

monah_79 · #6 (**permalink**) 10.04.2021, 18:43

Не, не работает там где отпускаю картинку, работает чисто статично на одном месте...

рони · #7 (**permalink**) 10.04.2021, 19:33

monah_79,
видимо у нас разные браузеры ))) код проверен в Google Chrome, Firefox, Microsoft Edge, версии актуальные на данный момент.

страницу данную обновите и скопируйте код(кнопка справа от кода), и создайте новый файл, там же где у вас лежит index.html.

monah_79 · #8 (**permalink**) 10.04.2021, 19:58

Создал файл html_2 скопировал в него код отсюда, не работает, браузер хром...

рони · #9 (**permalink**) 10.04.2021, 20:16

monah_79,
не судьба.

monah_79 · #10 (**permalink**) 10.04.2021, 20:22

и на том спасибо большое за помощь!!!

Форум

Справочник

Discord чат

Курсы javascript