Question

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

我这里有一个jsfiddle链接。 https://jsfiddle.net/6q1q0wmj/

＆＃13;

var TransformRequestObj
var TransList
var DragTarget=null;
var Dragging = false;
var OffsetX = 0;
var OffsetY = 0;
jQuery(document).on('mousedown','.bx_reposioned',function(evt){
		if(!Dragging) //---prevents dragging conflicts on other draggable elements---
		{
			DragTarget = evt.target;
			//---bring this viewPort to top---
			var xcord=evt.clientX;
			var ycord = evt.clientY;
			OffsetX= OffsetX || xcord;
			OffsetY= OffsetY || ycord;
			Dragging=true;
		}	
	});
	jQuery(document).on('mousemove','.bx_reposioned',function(evt){
		if(Dragging)
		{
			//var pnt = DragTarget.ownerSVGElement.createSVGPoint();
			var xcord=evt.clientX;
			var ycord = evt.clientY;
			xcord -= OffsetX;
			ycord -= OffsetY;
			jQuery(this).css('transform','translate('+xcord+'px, '+ycord+'px)');
		}
	});
	
	jQuery(document).on('mouseup','.bx_reposioned',function(evt){
		Dragging = false;
		var xcord=evt.clientX;
		var ycord = evt.clientY;
		
	});

＆＃13;

.furniture-sprite {
    display: block;
    margin: 0 auto;
}
.bed1 {
    width: 45px;
    height: 53px;
    background:red;
}
.bed2 {
    width: 45px;
    height: 53px;
    background:blue;
}
.furniture-sprite {
    display: inline-block;
    background-repeat: no-repeat;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="furniture-sprite bed1 ui-draggable ui-draggable-handle ui-draggable-dragging bx_reposioned" style="position: absolute; width: 45px; right: auto; height: 53px; bottom: auto; left: 410.953px; top: 95px;"></span>
<span class="furniture-sprite bed2 ui-draggable ui-draggable-handle ui-draggable-dragging bx_reposioned" style="position: absolute; width: 45px; right: auto; height: 53px; bottom: auto; left: 410.953px; top: 95px;"></span>
</div>

＆＃13;

Answer 1

问题是，mousedown处理程序会重置OffsetX和OffsetY，即使它已经设置了，如果你在覆盖之前进行检查，它似乎工作正常（第14行）：

        OffsetX= OffsetX || xcord;
        OffsetY= OffsetY || ycord;

https://jsfiddle.net/6q1q0wmj/1/

Answer 2

您每次都要重置偏移量。此外，对于mousemove和mouseup，您过滤只接受在拖动元素上发生的事件。

对于第一个问题，您应该在mousedown时再次保留偏移量，对于第二个问题，只需删除选择器过滤器。您将获得更流畅的拖动（因为它将检测文档周围的拖动），并且当您移出拖动区域时也会检测到mouseup。

现在你没有注意到拖拽区域的＃34;＆＃34;问题，因为你没有设置边界，但你会注意到你是否添加它们。

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

检查一下：

＆＃13;

var Dragging = false;

jQuery(document).on('mousedown','.bx_reposioned',function(evt){
    if(!Dragging) //---prevents dragging conflicts on other draggable elements---
    {
        //---bring this viewPort to top---
        var xcord = evt.clientX;
        var ycord = evt.clientY;
        !$(this).data("_dragOffset") && $(this).data("_dragOffset", {
            x: xcord,
            y: ycord
        }); // This will set the offset only if has no drag offset already saved
        Dragging = this;
    }
});
jQuery(document).on('mousemove', function(evt){
    if(Dragging) {
        var xcord = evt.clientX;
        var ycord = evt.clientY;
        var offset = $(Dragging).data("_dragOffset");
        xcord -= offset.x;
        ycord -= offset.y;
        jQuery(Dragging).css('transform','translate('+xcord+'px, '+ycord+'px)');
    }
});

jQuery(document).on('mouseup', function(evt){
    Dragging = false;
});

＆＃13;

.furniture-sprite {
    display: block;
    margin: 0 auto;
}
.bed1 {
    background-position: 0 -117px;
    width: 45px;
    height: 53px;
}
.furniture-sprite {
    display: inline-block;
    background-image: url('http://www.builderux.com/demo5/wp-content/plugins/Builder_UX-combined-code/assets/img/furniture-sprite.png');
    background-repeat: no-repeat;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="furniture-sprite bed1 ui-draggable ui-draggable-handle ui-draggable-dragging bx_reposioned" style="position: absolute; width: 45px; right: auto; height: 53px; bottom: auto; left: 410.953px; top: 95px;"></span>
</div>

＆＃13;

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

2 个答案: