javascript - 如何通过单击和拖动动态移动 Div

Question

我想在点击后根据鼠标在父div中的位置移动div。当我们离开鼠标指针时，然后设置div位置。 我到处搜索，这让我找到了做同样事情的过于复杂的方法，并且涉及到 j-query 的使用。我需要严格使用 javascript 来完成我要做的事情。

这是CSS代码

body {
    margin: 0px;
    padding: 0px;
}
.crop-container{
    width: 500px;
    height: 500px;
    border:5px solid black;
    position: relative;
}
.crop-lense{
    width: 100px;
    height: 100px;
    border: 5px dotted black;
    position: relative;
    z-index: 10;
    resize: both;
    background-color: transparent;
}

是html代码

<div class="crop-container" id="container" onmousemove="showCoords(event)">
    <div class="crop-lense" id="lense">

    </div>
</div>

这是javascript代码

var lense = document.getElementById('lense');
var container = document.getElementById("container");
var lensemflag = false;
var x;
var y;


lense.addEventListener('mousedown',function(){
    lensemflag = true;
    console.log(lensemflag);
});

lense.addEventListener('mouseup',function(){
    lensemflag = false;
    console.log(lensemflag);
});



function showCoords(event) {
    x = event.offsetX;
    y = event.offsetY;
    y = y - 50;
    x = x - 50;
}

if(lensemflag==true){
    setInterval(function() {
        lense.style.top = y + 'px';
        lense.style.left = x + 'px';
        }, 
    1);
}

Answer 1

最短答案:

var lense = document.getElementById("lense");
var container = document.getElementById("container");
var x;
var y;

lense.addEventListener("mousedown", function() {
  lense.addEventListener("mousemove", showCoords)
});

lense.addEventListener("mouseup", removeListener);
lense.addEventListener("mouseout", removeListener);

function removeListener() {
  lense.removeEventListener("mousemove", showCoords)
}

function showCoords(event) {
 if(container.offsetWidth >= event.pageX + lense.offsetWidth / 2 + 10 &&
   container.offsetHeight >= event.pageY + lense.offsetHeight / 2 + 10 &&
   event.pageX - lense.offsetWidth / 2 > 0 &&
   event.pageY - lense.offsetHeight / 2 > 0){
    x = event.pageX - lense.offsetWidth / 2;
    y = event.pageY - lense.offsetHeight / 2;
    lense.style.top = y + "px";
    lense.style.left = x + "px";
  }
}

 body {
            margin: 0px;
            padding: 0px;
          }
          .crop-container{
            width: 500px;
            height: 500px;
            border:5px solid black;
            position: relative;
          }
          .crop-lense{
            width: 100px;
            height: 100px;
            border: 5px dotted black;
            position: relative;
            z-index: 10;
            resize: both;
            background-color: transparent;
            t
          }

<div class="crop-container" id="container">
  <div class="crop-lense" id="lense">

  </div>
</div>