Javascript 以选择器为目标进行拖动&；滴

单击后，我将在div中创建一个点

我希望能够以拖放方式移动这一点

在我的代码中，我创建了一个可以移动的橙色项目，但是我不能用我创建的点来移动它，我不能瞄准它

此外，我希望当我移动点时，一旦设置，新的坐标会被保存，而不是旧的坐标，当设置点时，它会打开一个url（不管说google），但我不知道这是否可能

$（文档）.ready（函数（）{
让计数=0；
设resultArray=[]；
设addPoint=false；
让url；
$（“.button”）。在（'click'，function（）上{
addPoint=！addPoint
});
$（“.div1”）。单击（函数（ev）{
if（addPoint==true）{
$（“.div1”）.append(
$（`${count+1}`）.css({
位置：'绝对'，
顶部：ev.pageY+‘px’，
左：ev.pageX+‘px’，
宽度：“16px”，
边界半径：“12px”，
背景：“蓝色”，
颜色：'白色'，
textAlign:'中心'，
fontSize:'14px'，
填充：“3px”
})
);
计数=计数+1
url=“”
$（“#myTBody”）。追加(
“”+计数+“”+ev.pageX+“”+ev.pageY+
“”+url+“”
)
让点={
id:伯爵，
x:ev.pageX，
y:ev.pageY，
url:url
}
结果推（点）；
//$（“tr”）。在（'click'，函数（）{
//console.log（$（this.children（“：first”）.text（））
// });
}
});
const el=document.querySelector（“.item”）；
el.addEventListener（'mousedown'，mousedown'）；
功能鼠标向下（e）{
window.addEventListener（'mousemove'，mousemove）；
window.addEventListener（'mouseup'，mouseup）；
设prevX=e.clientX；
设prevY=e.clientY；
函数mousemove（e）{
设newX=prevX-e.clientX；
设newY=prevY-e.clientY；
const rect=el.getBoundingClientRect（）；
el.style.left=rect.left-newX+“px”；
el.style.top=rect.top-newY+“px”；
prevX=e.clientX；
prevY=e.clientY；
}
功能鼠标（e）{
removeEventListener（“mousemove”，mousemove）；
removeEventListener（“mouseup”，mouseup）；
}
}
});
。按钮{
填充：10px；
}
.项目{
高度：40px；
宽度：40px；
位置：绝对位置；
背景：橙色；
}
.1分部{
宽度：400px；
高度：200px；
背景颜色：灰色；
}

加分
尖头
PointX
尖头的
统一资源定位地址
这可能超出了您的预期。考虑使用jQuery UI库，以便可以使用Dracable。考虑下面的例子。


$（函数（）{
让计数=0；
设resultArray=[]；
让url；
功能生成点（训练、cnt、ev）{
var p=$（“”{
类：“点”
}).css({
顶部：ev.pageY+‘px’，
左：ev.pageX+‘px’
}).html（cnt）.appendTo（trg）；
p、 拖拉的({
遏制：“家长”，
停止：功能（e、ui）{
var i=parseInt（$（this.text（））；
更新点（即，e）；
}
});
返回{
id:cnt，
x:ev.pageX，
y:ev.pageY
};
}
函数更新点（id，ev）{
$.each（结果数组，函数（k，o）{
if（id==o.id）{
o、 x=ev.pageX；
o、 y=ev.pageY；
$（#myTBody tr:eq（“+k+”）td:eq（1）”）.html（ev.pageX）；
$（#myTBody tr:eq（“+k+”）td:eq（2）”）.html（ev.pageY）；
};
});
}
$（“.button”）。单击（函数（）{
$（“输入”，此）.prop（“选中”），！$（“输入”，此）.prop（“选中”）；
如果（$（“输入”，this）.is（“：checked”））{
$（“.ui可拖动”）.draggable（“禁用”）；
}否则{
$（“.ui可拖动”）.draggable（“启用”）；
}
$（this.toggleClass（“单击”）；
});
$（“.div1”）。单击（函数（e）{
如果（$（“.button input”）.是（“：checked”））{
设点=生成点（$（“.div1”），++count，e）；
point.url=“”；
结果推（点）；
$（“#myTBody”）。追加(
“+count+”“+point.x+”“+point.y”+
“”+point.url+“”
)
}
});
$（“.item”）.draggable({
遏制：“.div1”
});
});
。按钮{
填料：2em.4em；
边框：1px实心#6c6c；
边界半径：3px；
背景色：#eee；
宽度：自动；
最大宽度：100px；
光标：指针；
}
.按钮输入{
显示：无；
}
.项目{
高度：40px；
宽度：40px；
位置：绝对位置；
背景：橙色；
}
.1分部{
宽度：400px；
高度：200px；
背景颜色：灰色；
}
.点{
位置：绝对位置；
宽度：16px；
边界半径：12px；
背景：蓝色；
颜色：白色；
文本对齐：居中；
字体大小：14px；
填充：3倍；
游标：默认值；
}
.点击{
背景颜色：灰色；
}

加分
尖头
PointX
尖头的
统一资源定位地址
请将您的HTML包含在内，以制作一个演示该问题的演示文稿。Ops，没问题，抱歉。。