2020年新年大赛！

Question

recile

Asked:2020-01-20 02:55:29 +0000 UTC2020-01-20 02:55:29 +0000 UTC 2020-01-20 02:55:29 +0000 UTC

拖动到另一个元素（图片）时如何删除一个元素（图片） Drag'n'Drop

772

如何在拖动到另一个元素（图片）时移除一个元素（图片） Drag'n'Drop 如何在拖动到大门时移除一个球（球的移动）请帮忙

var ball = document.getElementById("ball");

ball.onmousedown = function(e){

    var coords = getCoords(ball);
    shiftX = e.pageX - getCoords(ball).left;
    shiftY = e.pageY - getCoords(ball).top;

    ball.style.position = "absolute";
   moveAt(e);


    document.body.appendChild(ball);

    ball.style.zIndex = 1000;

    

    function moveAt(e) {
        ball.style.left = e.pageX - shiftX + "px";
        ball.style.top = e.pageY - shiftY + "px";
    }


    document.onmousemove =function (e) {
        moveAt(e);
    }

    ball.onmouseup= function(){
        document.onmousemove = null;
        ball.onmouseup=null;
    }

  
}
ball.ondragstart = function() {
    return false;
  };
  function getCoords(elem) {   // кроме IE8-
    var box = elem.getBoundingClientRect();
    return {
      top: box.top + pageYOffset,
      left: box.left + pageXOffset
    };
  }

<img src="https://isplit.ru/image/cache/data/brendy/Leco/street_plus_300_h_200_sm/street_plus_300_h_200_sm_1-630x630-0.jpg" alt="" srcset=""  width="200" height="200">


  <img src="https://st.depositphotos.com/1000459/2436/i/450/depositphotos_24366251-stock-photo-soccer-ball.jpg" alt="" srcset="" id="ball" width="100" height="100">

2 个回答

Voted

dmshm · Answer 1 · 2020-01-20T04:03:30Z

您的问题已通过常规检查解决，我们拥有解决问题的所有功能。我们需要确保当球击中球门时，我们将其移除，为此我们将使用事件onmouseup，它会告诉我们何时释放球，然后我们将检查球是否击中球门区域，例如我们将计算这个 zone: var widthGoal = coordsGoal.top + goal.width, heightGoal = coordsGoal.left + goal.height;，这就是完成的代码：

var ball = document.getElementById("ball");
  var goal = document.getElementById("goal"); 

  ball.onmousedown = function(e){

    var coords = getCoords(ball);
    shiftX = e.pageX - getCoords(ball).left;
    shiftY = e.pageY - getCoords(ball).top;

    ball.style.position = "absolute";

    moveAt(e);

    document.body.appendChild(ball);

    ball.style.zIndex = 1000;

    function moveAt(e) {
      ball.style.left = e.pageX - shiftX + "px";
      ball.style.top = e.pageY - shiftY + "px";
    }


    document.onmousemove =function (e) {
      moveAt(e);
    }

    ball.onmouseup= function(){
      document.onmousemove = null;
      ball.onmouseup=null;
      
      var coordsGoal = getCoords(goal),
          coardBall = getCoords(ball);

      var widthGoal = coordsGoal.top + goal.width,
          heightGoal = coordsGoal.left + goal.height;

      if (coardBall.top < heightGoal && coardBall.left < widthGoal) {
        // Выполняем все что нам угодно
        ball.remove();
      }
    }


  }
  ball.ondragstart = function() {
    return false;
  };

  function getCoords(elem) {
    var box = elem.getBoundingClientRect();
    return {
      top: box.top + pageYOffset,
      left: box.left + pageXOffset
    };
  }

<img src="https://isplit.ru/image/cache/data/brendy/Leco/street_plus_300_h_200_sm/street_plus_300_h_200_sm_1-630x630-0.jpg" alt="" srcset=""  id="goal" width="200" height="200">


<img src="https://st.depositphotos.com/1000459/2436/i/450/depositphotos_24366251-stock-photo-soccer-ball.jpg" alt="" srcset="" id="ball" width="100" height="100">

我添加了一个解决问题的选项（评论中讨论了随机定位的额外数量的球）。为了随机排列元素，我使用了'Math.random() * (max - min) + min'。一般来说，代码需要改进，因为有时会弹出一个错误，但我认为你会很有趣地弄清楚为什么，以及这一切是如何发生的。哦，是的，还有一件事，第一个球真的很糟糕，所以它静止不动，我想你会明白的。

在提出问题之前，我对您的建议是自己完成任务，否则一切都值得吗？祝你学习顺利。

编码：

var ball = document.getElementById("ball"),
        goal = document.getElementById("goal");

    createAndCopyBall(ball, 5);

    function controllerBalls() {
        document.onmousedown = function (e) {
            // Получили координаты текущего положения мяча
            var coords = getCoords(e.target);
            // Обработали нужные нам данные
            var shiftX = e.pageX - coords.left,
                shiftY = e.pageY - coords.top;

            moveAtLocal(e);

            function moveAtLocal (e) {
                e.target.style.left = e.pageX - shiftX + "px";
                e.target.style.top = e.pageY - shiftY + "px";
            }

            document.onmousemove = function (e) {
                moveAtLocal(e);
            };

            e.target.onmouseup = function () {
                document.onmousemove = null;
                e.target.onmouseup = null;
                if (checkCoords(e.target)) {
                    e.target.remove();
                }
            }
        };

        document.ondragstart = function () {
            return false;
        };
    }

    function createAndCopyBall(ballObject, countBalls) {
        var body = document.querySelector('body');
        // Первоначальному мячу контроллер тоже надо =)
        controllerBalls(ballObject);

        for (var i = 0; i < countBalls; i++) {
            var copiedBall = ballObject.cloneNode();
            // Получилили координаты текущего положения мяча
            var coords = getCoords(copiedBall);
            // Обработали нужные нам данные
            var shiftX = copiedBall.x - coords.left - getRandomArbitary(100, 1000),
                shiftY = copiedBall.y - coords.top - getRandomArbitary(100, 1000);
            // Указали абсолютное позиционирование
            copiedBall.style.position = "absolute";
            // Указали стартовые координаты
            moveAt(copiedBall, copiedBall, shiftX, shiftY);
            // Добавили в DOM дерево
            body.appendChild(copiedBall);
            // Назчаем контроллер для мяча
            controllerBalls(copiedBall);
        }
    }

    function checkCoords(ballObject) {
        var coordsGoal = getCoords(goal),
            coardBall = getCoords(ballObject);

        var widthGoal = coordsGoal.top + goal.width,
            heightGoal = coordsGoal.left + goal.height;

        if (coardBall.top < heightGoal && coardBall.left < widthGoal) {
            return true;
        }

        return false;
    }

    function moveAt(e, ballObject, shiftX, shiftY) {
        ballObject.style.left = e.pageX !== undefined ? e.pageX : e.x - shiftX + "px";
        ballObject.style.top = e.pageY !== undefined ? e.pageY : e.y  - shiftY + "px";
    }

    function getCoords(elem) {
        var box = elem.getBoundingClientRect();
        return {
            top: box.top + pageYOffset,
            left: box.left + pageXOffset
        };
    }

    function getRandomArbitary(min, max) {
        return Math.random() * (max - min) + min;
    }

 .ball {
      z-index: 1000;
    }

<img src="https://isplit.ru/image/cache/data/brendy/Leco/street_plus_300_h_200_sm/street_plus_300_h_200_sm_1-630x630-0.jpg"
     alt="" srcset="" id="goal" width="200" height="200">

<img src="https://realrussianclub.com/wp-content/uploads/2018/06/football-157930_640.png"
     alt="" srcset="" id="ball" class="ball" width="100" height="100">

recile · Answer 2 · 2020-01-20T15:09:19Z

评论的解决方案。（你能帮忙吗？如何添加，以便有几个球并且所有东西都可以移动？）

添加额外的球，结果：只需添加

 ball= e.target;
        ball.classList.contains('ball1');

var goal = document.getElementById("goal"); 

  document.onmousedown = function(e){

    ball= e.target;
    ball.classList.contains('ball1');

    var coords = getCoords(ball);
    shiftX = e.pageX - getCoords(ball).left;
    shiftY = e.pageY - getCoords(ball).top;

    ball.style.position = "absolute";

    moveAt(e);

    document.body.appendChild(ball);

    ball.style.zIndex = 1000;

    function moveAt(e) {
      ball.style.left = e.pageX - shiftX + "px";
      ball.style.top = e.pageY - shiftY + "px";
    }


    document.onmousemove =function (e) {
      moveAt(e);
    }

    ball.onmouseup= function(){
      document.onmousemove = null;
      ball.onmouseup=null;
      
      var coordsGoal = getCoords(goal),
          coardBall = getCoords(ball);

      var widthGoal = coordsGoal.top + goal.width,
          heightGoal = coordsGoal.left + goal.height;

      if (coardBall.top < heightGoal && coardBall.left < widthGoal) {
        // Выполняем все что нам угодно
        ball.remove();
      }
    }


  }
  document.ondragstart = function() {
    return false;
  };

  function getCoords(elem) {
    var box = elem.getBoundingClientRect();
    return {
      top: box.top + pageYOffset,
      left: box.left + pageXOffset
    };
  }

<img src="https://isplit.ru/image/cache/data/brendy/Leco/street_plus_300_h_200_sm/street_plus_300_h_200_sm_1-630x630-0.jpg" alt="" srcset=""  id="goal" width="200" height="200">


<img src="https://st.depositphotos.com/1000459/2436/i/450/depositphotos_24366251-stock-photo-soccer-ball.jpg" alt="" srcset="" id="ball" width="100" height="100">
<img src="https://st.depositphotos.com/1000459/2436/i/450/depositphotos_24366251-stock-photo-soccer-ball.jpg" alt="ball.svg" srcset="" id="ball" width="100" height="100" class="ball1">
<img src="https://st.depositphotos.com/1000459/2436/i/450/depositphotos_24366251-stock-photo-soccer-ball.jpg" alt="ball.svg" srcset="" id="ball" class="ball1" width="100" height="100">
<img src="https://st.depositphotos.com/1000459/2436/i/450/depositphotos_24366251-stock-photo-soccer-ball.jpg" alt="ball.svg" srcset="" id="ball" class="ball1" width="100" height="100">

拖动到另一个元素（图片）时如何删除一个元素（图片） Drag'n'Drop

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

拖动到另一个元素（图片）时如何删除一个元素（图片） Drag'n'Drop

2 个回答

相关问题