爲什麼用css轉換跳轉時拖動？

我想拖拽一個容器使用transform轉換，但是有些東西導致了一個跳躍的行爲，我不知道是什麼原因。
更新：當它們的容器並非始終位於文檔的0,0處時，它必須對元素起作用。爲什麼用css轉換跳轉時拖動？

HTML：

<div id=container style="position:absolute;left:50px;top:50px;width:500px;height:500px;background-color:red;"> 
    <div id=tcontainer style="position:relative;left:50px;top:50px;width:400px;height:400px;background-color:green;"> 
     <div id=move style="position:relative;left:20px;top:20px;height:150px;width:150px;background-color:lightgray;"> 
    </div> 
</div>

的Javascript：

obj = {startPositionX:0,startPositionY:0}; 
$('#move').on("mousedown",function(){ 
    var move = $(this); 
    obj.startPositionX=event.offsetX+$('#tcontainer').offset().left; 
    obj.startPositionY=event.offsetY+$('#tcontainer').offset().top; 
    $(document).on("mousemove",function(e){ 
     console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY); 
     move.css('transform','translate('+(e.pageX-obj.startPositionX)+'px, '+(e.pageY-obj.startPositionY)+'px)'); 
    }); 
}); 
$(document).on("mouseup",function(){ 
    $(this).off("mousemove"); 
});

來源

2013-12-12 shuji

這是一個原創的概念/實現還是你有一個工作，非乾的例子，你工作？如果它是一個新的CSS轉換使用，它非常聰明，但可能會因爲js引擎到DOM到CSS呈現之間的延遲而變得不穩定。 – Anthony

http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/ – Anthony

不，我正在處理一個我想用轉換屬性導出的svg項目。這只是我做的一個例子。 – shuji

OFFSETX和OFFSETY可能會給你光標相對於現在懸停元素POS。你在mousedown中保存了初始座標。當mousemove被觸發時，這個座標會發生一些變化，所以當你從首字母中減去一個零時（或者1px的差異），你的div就會到達左上角。在它激發你的光標懸浮身體元素後，在mousemove中，你會得到與身體有關的座標。所以當你從新的座標中減去你的零點時，你會得到真實的座標，你的div將會到達正確的位置。然後你將得到與拖動div相關的座標，並且將再次得到零，然後是真正的座標等。

請改用pageX和pageY！ fiddle

$('.move').on("mousedown",function(me){ 
    var move = $(this); 

    var lastOffset = move.data('lastTransform'); 
    var lastOffsetX = lastOffset ? lastOffset.dx : 0, 
     lastOffsetY = lastOffset ? lastOffset.dy : 0; 

    var startX = me.pageX - lastOffsetX, startY = me.pageY - lastOffsetY; 

    $(document).on("mousemove",function(e){ 
     var newDx = e.pageX - startX, 
      newDy = e.pageY - startY; 
     console.log("dragging", e.pageX-startX, e.pageY-startY); 
     move.css('transform','translate(' + newDx + 'px, ' + newDy + 'px)'); 

     // we need to save last made offset 
     move.data('lastTransform', {dx: newDx, dy: newDy }); 
    }); 
}); 
$(document).on("mouseup",function(){ 
    $(this).off("mousemove"); 
});

您需要保存您的div（move.offset()），並用鼠標偏移（e.pageX-startX，e.pageY-startY）的原COORDS獲得新COORDS。

來源

2013-12-12 06:06:26 Tony

但容器絕對位置。我認爲event.page將相對於文檔0,0工作。不是event.offset比substract offset（）更好嗎？ – shuji

@shuji對不起，我在我的代碼中犯了一個錯誤，修正了。請看我更新的答案。 – Tony

OffsetX和OffsetY可能會給你光標pos相對於你的div，如果光標在它的內部。所以它在你的代碼中完成了，並且你得到了0,0。當它跳到0,0光標停留在容器上時，它給你真正的容器上的真實座標，你的div跳到正確的位置。然後光標再次在div上，你會得到0,0等等。 – Tony

爲什麼用css轉換跳轉時拖動？

回答

相關問題