如何仅允许在HTML/JavaScript中的某个特定位置删除项目？_Javascript_Html_Css_Drag And Drop

如何仅允许在HTML/JavaScript中的某个特定位置删除项目？

javascript html css

如何仅允许在HTML/JavaScript中的某个特定位置删除项目？,javascript,html,css,drag-and-drop,Javascript,Html,Css,Drag And Drop,你好，我的社区伙伴！在过去的几周里，我一直在研究HTML/JavaScript的拖放功能。基本上，我有一个圆圈和两个盒子。圆可以拖动到屏幕上的任何位置。但是，我需要它，这样圆只能放在两个盒子中的一个里面。尽管进行了几天的研究，我还是不知道该怎么做。提前谢谢你 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,

你好，我的社区伙伴！在过去的几周里，我一直在研究HTML/JavaScript的拖放功能。基本上，我有一个圆圈和两个盒子。圆可以拖动到屏幕上的任何位置。但是，我需要它，这样圆只能放在两个盒子中的一个里面。尽管进行了几天的研究，我还是不知道该怎么做。提前谢谢你

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" 
        content="width=device-width, 
        initial-scale=1.0, 
        user-scalable=no" />
  <title>Drag/Drop/Bounce</title>
  <style>
    #item {
      width: 100px;
      height: 100px;
      background-color: rgb(245, 230, 99);
      border: 10px solid rgba(136, 136, 136, .5);
      border-radius: 50%;
      touch-action: none;
      user-select: none;
    }

    #box1 {
      width: 200px;
      height: 200px;
      background-color: red;
    }

    #box2 {
      width: 200px;
      height: 200px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
<h1>Drag and Drop</h1>
<div id="box1">
  <div id="item"></div>
</div>
<br>
<div id="box2"></div>

  <script>
    var dragItem = document.querySelector("#item");
    var container = dragItem;

    //Declare Variables
    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;

    //Add Event Listeners for Touchscreens
    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    //Add Event Listeners for Mice
    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) { //when the drag starts
      if (e.type === "touchstart") { //if its a touchscreen
        initialX = e.touches[0].clientX - xOffset; //set initial x-cordinate to where it was before drag started
        initialY = e.touches[0].clientY - yOffset; //set initial y-cordinate to where it was before drag started
      } else { //if its not a touchscreen (mouse)
        initialX = e.clientX - xOffset; //set initial x-cordinate to where it was before drag started
        initialY = e.clientY - yOffset; //set initial y-cordinate to where it was before drag started
      }

      if (e.target === dragItem) { //if user is dragging circle
        active = true; //the drag is active
      }
    }

    function dragEnd(e) { //when the drag ends
      initialX = currentX; //set the initial x-cordinate to where it is now
      initialY = currentY; //set the initial y-cordinate to where it is now

      active = false; //the drag is no longer active
    }

    function drag(e) { //when the circle is being dragged
      if (active) { //if the drag is active
        e.preventDefault(); //the user cant do anything else but drag

        if (e.type === "touchmove") { //if its a touchscreen
          currentX = e.touches[0].clientX - initialX; //set current x-cordinate to where it is now
          currentY = e.touches[0].clientY - initialY; //set current y-cordinate to where it is now
        } else { //if its not a touchscreen (mouse)
          currentX = e.clientX - initialX; //set current x-cordinate to where it is now
          currentY = e.clientY - initialY; //set current y-cordinate to where it is now
        }

        //Im not sure what this does but it dosnt work without it
        xOffset = currentX;
        yOffset = currentY;
        setTranslate(currentX, currentY, dragItem);
      }
    }

    function setTranslate(xPos, yPos, el) { //Im not sure what this does but it dosnt work without it
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>
</body>

</html>


拖放/反弹
#项目{
宽度：100px；
高度：100px；
背景色：rgb（245230，99）；
边框：10px实心rgba（136136136.5）；
边界半径：50%；
触摸动作：无；
用户选择：无；
}
#框1{
宽度：200px；
高度：200px；
背景色：红色；
}
#框2{
宽度：200px；
高度：200px；
背景颜色：浅蓝色；
}
拖放


var dragItem=document.querySelector（“#项”）；
var容器=dragItem；
//声明变量
var-active=false；
无功电流x；
无功电流；
var initialX；
初始变量；
var xOffset=0；
var yOffset=0；
//为触摸屏添加事件侦听器
container.addEventListener（“touchstart”，dragStart，false）；
container.addEventListener（“touchend”，dragEnd，false）；
container.addEventListener（“touchmove”，拖动，false）；
//为鼠标添加事件侦听器
container.addEventListener（“mousedown”，dragStart，false）；
container.addEventListener（“mouseup”，dragEnd，false）；
container.addEventListener（“mousemove”，拖动，false）；
函数dragStart（e）{//当拖动开始时
如果它是一个触摸屏
initialX=e.touchs[0]。clientX-xOffset；//将初始x-cordinate设置为开始拖动之前的位置
initialY=e.touchs[0]。clientY-yOffset；//将初始y-cordinate设置为开始拖动之前的位置
}否则{//如果不是触摸屏（鼠标）
initialX=e.clientX-xOffset；//将初始x-cordinate设置为开始拖动之前的位置
initialY=e.clientY-yOffset；//将初始y-cordinate设置为开始拖动之前的位置
}
如果（e.target==dragItem）{//如果用户正在拖动圆
active=true；//拖动处于活动状态
}
}
函数dragEnd（e）{//当拖动结束时
initialX=currentX；//将初始x坐标设置为现在的位置
initialY=currentY；//将初始y坐标设置为现在的位置
active=false；//拖动不再处于活动状态
}
拖动圆时，函数拖动（e）{//
如果（活动）{//如果拖动处于活动状态
e、 preventDefault（）；//用户只能拖动
如果它是一个触摸屏
currentX=e.Touchs[0]。clientX-initialX；//将当前x-cordinate设置为当前位置
currentY=e.Touchs[0]。clientY-initialY；//将当前y-cordinate设置为当前位置
}否则{//如果不是触摸屏（鼠标）
currentX=e.clientX-initialX；//将当前x-cordinate设置为当前位置
currentY y=e.clientY-initialY；//将当前y-cordinate设置为当前位置
}
//我不知道这有什么用，但没有它就不行
xOffset=currentX；
yOffset=电流y；
setTranslate（currentX、currentY、dragItem）；
}
}
函数setTranslate（xPos，yPos，el）{//我不确定这是做什么的，但是没有它它它就不能工作
el.style.transform=“translate3d（“+xPos+”px，+yPos+”px，0）”；
}

我还将代码上传到了TryIt，供那些喜欢的人使用：

在这个版本中，您只能在红色框内移动圆圈。我认为你可以接受这个，并轻松实现另一个框


拖放/反弹
#项目{
宽度：100px；
高度：100px；
背景色：rgb（245230，99）；
边框：10px实心rgba（136136136.5）；
边界半径：50%；
触摸动作：无；
用户选择：无；
位置：绝对位置；
}
#框1{
宽度：200px；
高度：200px；
背景色：红色；
}
#框2{
宽度：200px；
高度：200px；
背景颜色：浅蓝色；
}
拖放


var dragItem=document.querySelector（“#项”）；
var box1=document.querySelector（#box1”）；
var box2=document.querySelector（#box2”）；
var容器=dragItem；
//声明变量
var-active=false；
无功电流x；
无功电流；
var initialX；
初始变量；
var xOffset=0；
var yOffset=0；
//为触摸屏添加事件侦听器
container.addEventListener（“touchstart”，dragStart，false）；
container.addEventListener（“touchend”，dragEnd，false）；
container.addEventListener（“touchmove”，拖动，false）；
//为鼠标添加事件侦听器
container.addEventListener（“mousedown”，dragStart，false）；
container.addEventListener（“mouseup”，dragEnd，false）；
container.addEventListener（“mousemove”，拖动，false）；
函数dragStart（e）{//当拖动开始时
如果它是一个触摸屏
initialX=e.touchs[0]。clientX-xOffset；//将初始x-cordinate设置为开始拖动之前的位置
initialY=e.touchs[0]。clientY-yOffset；//将初始y-cordinate设置为开始拖动之前的位置
}否则{//如果不是触摸屏（鼠标）
initialX=e.clientX-xOffset；//将初始x-cordinate设置为开始拖动之前的位置
initialY=e.clientY-yOffset；//将初始y-cordinate设置为开始拖动之前的位置
}
如果（e.target==dragItem）{//如果用户正在拖动圆
active=true；//拖动处于活动状态
}
}
函数dragEnd（e）{//当拖动结束时
const box1Size=box1.getBoundingClientRect（）
const elementSize=dragItem.getBoundingClientRect（）
如果（elementSize.left>=box1Size.left&&elementSize.right=box1Size.top&&elementSize.bottom）您通读了吗？它非常简单。似乎您想在se上阅读