Javascript 如何在div中移动或重新定位元素

我正在尝试在div中重新定位一个元素。基本上它是一个带有背景图像的跨度。我已经完成了80%的部分。当我第一次单击它时，它工作得非常好。它移动到了所需的位置。但当我第二次点击它时，它会重置到初始位置。下面是我的代码

我这里有一个JSFIDLE链接

var TransformRequestObj
变异易位者
var DragTarget=null；
var=false；
var OffsetX=0；
var OffsetY=0；
jQuery（document）.on（'mousedown'，'.bx_reposioned'，函数（evt）{
if（！Dragging）/---防止在其他可拖动元素上拖动冲突---
{
DragTarget=evt.target；
//---将此视口置于顶部---
var xcord=evt.clientX；
var ycord=evt.clientY；
OffsetX=OffsetX | | xcord；
OffsetY=OffsetY | | ycord；
拖动=真；
}	
});
jQuery（document）.on（'mousemove'，'.bx_reposioned'，函数（evt）{
如果（拖动）
{
//var pnt=DragTarget.ownerSVGElement.createSVGPoint（）；
var xcord=evt.clientX；
var ycord=evt.clientY；
xcord-=抵消x；
ycord-=偏移；
jQuery（this）.css（'transform'，'translate（'+xcord+'px'，+ycord+'px'）；
}
});
jQuery（document）.on（'mouseup'，'.bx_reposioned'，函数（evt）{
拖动=假；
var xcord=evt.clientX；
var ycord=evt.clientY；
});
。家具精灵{
显示：块；
保证金：0自动；
}
.bed1{
宽度：45px；
高度：53px；
背景：红色；
}
.bed2{
宽度：45px；
高度：53px；
背景：蓝色；
}
.家具精灵{
显示：内联块；
背景重复：无重复；
}
问题在于，鼠标向下处理程序会重置
OffsetX
和
OffsetY
，即使它已经设置，

如果在覆盖它之前进行检查，它似乎工作正常（第14行）：

您每次都在重置偏移量。另外，对于
mousemove
和
mouseup
您正在进行过滤，以便仅在事件发生在拖动的元素上时才接受它们

对于第一个问题，再次
鼠标向下
时应保持偏移量，对于第二个问题，只需移除选择器过滤器。您将有一个更流畅的拖动（因为它将检测文档周围的拖动），并且在您移出拖动区域时还会检测到
mouseup

现在，您不会注意到“超出拖动区域”问题，因为您没有设置边界，但如果添加边界，您会注意到

如果有多个图元，则应在每个图元上保存偏移量。这是一种简单的jQuery方法：

选中此项：


var拖动=false；
jQuery（document）.on（'mousedown'，'.bx_reposioned'，函数（evt）{
if（！Dragging）/---防止在其他可拖动元素上拖动冲突---
{
//---将此视口置于顶部---
var xcord=evt.clientX；
var ycord=evt.clientY；
！$（此）.data（“\u dragOffset”）&&$（此）.data（“\u dragOffset”{
x:xcord，
y:ycord
})；//仅当尚未保存拖动偏移量时，才会设置偏移量
拖动=这个；
}
});
jQuery（document）.on（'mousemove'，函数（evt）{
如果（拖动）{
var xcord=evt.clientX；
var ycord=evt.clientY；
变量偏移量=$（拖动）.data（“\u dragOffset”）；
xcord-=偏移量.x；
ycord-=偏移量y；
css（'transform'，'translate（'+xcord+'px'，+ycord+'px'）；
}
});
jQuery（document）.on（'mouseup'，function（evt）{
拖动=假；
});
。家具精灵{
显示：块；
保证金：0自动；
}
.bed1{
背景位置：0-117px；
宽度：45px；
高度：53px；
}
.家具精灵{
显示：内联块；
背景图像：url（'http://www.builderux.com/demo5/wp-content/plugins/Builder_UX-combined-code/assets/img/furniture-sprite.png');
背景重复：无重复；
}

Fiddle，拜托。@JorgeFuentesGonzález当代码可以而且应该放在这里，放在代码片段中时，为什么要请求小提琴呢？@ScottMarcus很好，就像你说“谷歌it”，但人们使用Bing或Yahoo。对于Fiddle，我的意思是有一个工作示例，只要我能看到一个工作示例，我不介意在哪里（Cdepen、JSFIDLE或这里的钳子）。简单地说，在我的环境中，我们这样说是为了“摆弄它”。请在代码片段中包含所有相关代码（HTML、CSS和JavaScript）。@JorgeFuentesGonzález With Fiddle我的意思是有一个工作示例，我不介意在哪里，但堆栈溢出确实介意。随着时间的推移，外部链接可能会中断，也将中断。堆栈溢出是一个知识库。当链接损坏时，在以后发现此问题的用户将无法从中获得任何信息。只要可能，应在问题中提供代码。有一个非常好的代码段环境，大多数代码都将在其中运行。很高兴知道这有帮助！很好，谢谢
        OffsetX= OffsetX || xcord;
        OffsetY= OffsetY || ycord;