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

Question

我想重新定位div中的元素。基本上它的背景圖片是一個跨度。我已經完成了80％的零件。當我第一次點擊它時，它的工作完美。它移動到所需的位置。但是當我第二次點擊它重置到它的初始position.Below是我的代碼。

我在這裏有一個jsfiddle鏈接。 https://jsfiddle.net/6q1q0wmj/

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

.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; 
 
}

<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>

Answer 1

您每次都重置偏移量。另外，對於mousemove和mouseup，您正在進行篩選，以便只在接收拖動元素時發生的事件。

對於第一個問題，當您再次mousedown時應該保持偏移量，對於第二個問題，只需刪除選擇器過濾器。您將有一個更流暢的拖動（因爲它會檢測文檔周圍的拖動），並且當您移出拖動區域時也會檢測到mouseup。

現在你不會注意到「出現拖拽區域」的問題，因爲你沒有設置邊界，但是如果你添加它們，你會注意到。

如果存在多個元素，則應該保留每個元素上保存的偏移量。這是做這件事的簡單的jQuery的方法：

檢查：

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; 
 
});

.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; 
 
}

<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>

Answer 2

的問題是，鼠標按下處理程序重置OffsetX即使它已經設置OffsetY，
如果您覆蓋它之前做一次檢查，這似乎很好地工作（第14行）：

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

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