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

#javascript #html #css

#javascript #HTML #css

Вопрос:

 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>

Развернуть фрагмент

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

Спасибо и с уважением, Zajjith

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

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

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

Ответ №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";
  }
}