Как переместить переднее изображение, не затрагивая заднее изображение в JavaScript?

function generate() {
    var c1 = document.getElementById('shadeDiv');
    c1.addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
    
    function mouseUp() {
        window.removeEventListener('mousemove', move, true);
        c1.style.top = "8px";
        c1.style.left = "565px";
    }
    
    function mouseDown(e) {
        window.addEventListener('mousemove', move, true);
    }
    
    function move(e) {
        c1.style.top = e.clientY + 'px';
        c1.style.left = e.clientX + 'px';
    }
    }

 body {
        height: 100%;
        background-color: #ffffcc;
        text-align: center;
    }
    
    #shadeDiv {
        border:1px solid;
        position:absolute;
        left: 565px;
        top: 8px;
        width: 145px;
        height: 227px; 
    }
    
    #shade {
        width: 145px;
        height: 227px; 
    }

    <!DOCTYPE html>
    <html>
    <head>
        <title>Masking</title>
        <link rel = "stylesheet" type = "text/css" href = "styles.css">
        <script type = "text/javascript" src = "script.js"></script>
    </head>
    <body onload = "generate()">
    
        <div id = "divImage">
            <img src = "dotcard0.png" id = "shade">
        </div>
    
        <div id = "shadeDiv">
            <img src = "shade.png" id = "shade">
        </div>
    
    </body>
    </html>

Привет, это коды. Если я выберу изображение «затенение», чтобы переместиться в то же время назад, изображение будет выбрано и всплывает. Но я хочу, чтобы, если я выберу «затененное» изображение для перемещения, оно выберет только «затененное» изображение, и мне нужно двигаться только по вертикали. Но пока я могу двигаться только куда угодно на странице, но я хочу двигаться только по вертикали. Итак, резюмируя, я хочу выбрать только изображение «затенение», не затрагивая изображение «dotcard0», и мне нужно перемещать изображение «затенение» только по вертикали. Пожалуйста, помогите мне.

Спасибо и С уважением, Зайджит

Весь клиентский код? Нет кода сервера?

— 14.12.2020 07:11

Да. Все коды являются кодами на стороне клиента.

— 14.12.2020 07:13

После нажатия фрагмента кода запуска перейдите на полную страницу.

— 14.12.2020 07:23

javascript html css

14.12.2020 07:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы можете изменить свой код, чтобы он был таким

function generate() {
  var c1 = document.getElementById('shadeDiv');
  c1.addEventListener('mousedown', mouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);
  var origY = null;

  function mouseUp() {
    window.removeEventListener('mousemove', move, true);
    origY = e.clientY;
  }

  function mouseDown(e) {
    window.addEventListener('mousemove', move, true);
  }

  function move(e) {
    c1.style.top = (origY + e.clientY) + "px";
  }
}

Если я нажму на переднее изображение, появится всплывающее изображение. Как я могу это исправить? ibb.co/vP0F1Mn

— 14.12.2020 07:31

извините, я не понимаю вашего вопроса

— 14.12.2020 07:40

14.12.2020 07:24