Javascript 按数字顺序拖动选定的输入框

在我的HTML中，我有一个只包含数值的文本框。假设在下一行中我有另一个文本框。现在我想要的是，当我拖动第一个文本框（鼠标按住）时，在下一个文本框中，当我松开鼠标时，值将自动增加1。我无法解决这个问题并找到解决方案

下面是我尝试的代码片段：

var-active=false；
无功电流x；
无功电流；
var initialX；
初始变量；
var xOffset=0；
var yOffset=0；
if（document.getElementById（“input1”）.value！=null）{
document.getElementById（“input1”）.addEventListener（“touchstart”，dragStart，false）；
document.getElementById（“input1”）。addEventListener（“touchend”，dragEnd，false）；
document.getElementById（“input1”）.addEventListener（“touchmove”，drag，false）；
document.getElementById（“input1”）.addEventListener（“mousedown”，dragStart，false）；
document.getElementById（“input1”）。addEventListener（“mouseup”，dragEnd，false）；
document.getElementById（“input1”）.addEventListener（“mousemove”，拖动，false）；
}
函数dragStart（e）{
如果（例如，类型==“touchstart”）{
initialX=e.touchs[0].clientX-xOffset；
initialY=e.touchs[0]。clientY-yOffset；
}否则{
initialX=e.clientX-xOffset；
initialY=e.clientY-yOffset；
}
console.log（'initialX:：'+initialX+“initialY”+initialY）；
if（e.target==document.getElementById（“input1”））{
主动=真；
}
}
函数dragEnd（e）{
初始值x=当前值x；
初始值y=当前值y；
主动=假；
}
函数拖动（e）{
如果（活动）{
e、 预防默认值（）；
如果（例如类型==“触摸移动”）{
currentX=e.touchs[0].clientX-initialX；
currentY y=e.touchs[0]。clientY-初始值；
}否则{
currentX=e.clientX-initialX；
currentY y=e.clientY-初始值；
}
log（'xoffset:：'+currentX）；
console.log（'yoffset'+currentY）；
xOffset=currentX；
yOffset=电流y；
setTranslate（currentX、currentY、document.getElementById（“input1”））；
}
}
函数setTranslate（xPos、yPos、el）{
el.style.transform=“translate3d（“+xPos+”px，+yPos+”px，0）”；
}

如果我正确理解了你的问题，这是一个干净的解决方案

//mouseup函数
函数mouseUp（）{
//从输入中获取输入值
var a=document.getElementById（'input1'）。值；
var b=document.getElementById（'input2'）。值；
//将它们添加到第二个输入中
document.getElementById（'input2'）。值=+a++b；
}

此问题是由其事件侦听器引起的。在

input

元素上编写所有侦听器。当鼠标

拖动

开始时，输入在鼠标指针的相同位置下移动。但当我们增加

鼠标指针

移动速度时，它会移动到输入框的

外部

此时，鼠标移动
事件不会触发
，因为您在输入控件右侧写入
拖动
事件

解决方案：

制作一个要在其中拖动输入的容器
在该容器上写入
鼠标移动
事件侦听器
您应该尝试下面的代码片段


var-active=false；
无功电流x；
无功电流；
var initialX；
初始变量；
var xOffset=0；
var yOffset=0；
if（document.getElementById（“input1”）.value！=null）{
document.getElementById（“input1”）.addEventListener（“touchstart”，dragStart，false）；
document.getElementById（“input1”）。addEventListener（“touchend”，dragEnd，false）；
document.getElementById（“inputContainer”）.addEventListener（“touchmove”，drag，false）；
document.getElementById（“input1”）.addEventListener（“mousedown”，dragStart，false）；
document.getElementById（“input1”）。addEventListener（“mouseup”，dragEnd，false）；
document.getElementById（“inputContainer”）.addEventListener（“mousemove”，拖动，false）；
}
函数dragStart（e）{
如果（例如，类型==“touchstart”）{
initialX=e.touchs[0].clientX-xOffset；
initialY=e.touchs[0]。clientY-yOffset；
}否则{
initialX=e.clientX-xOffset；
initialY=e.clientY-yOffset；
}
if（e.target==document.getElementById（“input1”））{
主动=真；
}
}
函数dragEnd（e）{
初始值x=当前值x；
初始值y=当前值y；
主动=假；
}
函数拖动（e）{
如果（活动）{
e、 预防默认值（）；
如果（例如类型==“触摸移动”）{
currentX=e.touchs[0].clientX-initialX；
currentY y=e.touchs[0]。clientY-初始值；
}否则{
currentX=e.clientX-initialX；
currentY y=e.clientY-初始值；
}
xOffset=currentX；
yOffset=电流y；
setTranslate（currentX、currentY、document.getElementById（“input1”））；
}
}
函数setTranslate（xPos、yPos、el）{
el.style.transform=“translate3d（“+xPos+”px，+yPos+”px，0）”；
}
#输入容器{
宽度：100vw；
高度：100vh；
背景：红色；
}



这不是我想要的。像excel一样，我们可以从列中拖动，当拖放时，它会增加列值。所以，我想用javascript实现类似的方法。首先加载页面，当我按住鼠标时（拖动），然后当我按住鼠标时，列值自动递增。是的，我现在可以拖动元素并将其放到另一个位置。但我的实际需求几乎没有什么不同。当我从该特定列调用drag方法，并将其放置在列的正下方时，列值应自动递增。与excel类似的功能。是否要使功能类似于将每个输入框拖动到一个输入框中，并且其值随拖放的输入框值递增？让我解释一下，假设我有一个HTML表格，里面有两列。这两个列的值本质上都是数字。现在，如果一些用户拖动第一列值并将其放到第二列中，那么第二列值应该是i