具有background-size：cover的可拖動背景圖像

Question

我有一個固定的div，其中包含一個像這樣的背景圖像

<div style='
     width:230px;
     height:230px;
     background-repeat: no-repeat;
     background-image:url(img/myimage.jpeg)
     background-size: cover;'></div>

圖像與div框重疊。 用戶應該能夠拖動圖像和新的背景位置：在用戶釋放鼠標之后，應該可以通過jQuery以某種方式訪問​​坐標。 我的目標是創建一個非常簡單的廢話圖片效果，就像在Facebook中一樣：

我該如何實現？ 甚至有可能用background-size：cover顯示溢出背景嗎？

Answer 1

您可以使用此插件 ，然后嘗試

element.backgroundDraggable()

這里有一個演示

Answer 2

您需要處理div上的mousemove事件，並從那里計算新的background-position 。

這是一個入門的示例： http : //codepen.io/dghez/pen/ItxKE

要查看是否在mousemove處理程序中按下了鼠標左鍵（模擬拖動），請檢查e.buttons === 1 （ MDN ）

更新：

該示例中的修改過的mousemove處理程序，可讓您拖動背景（同時煩人地選擇文本...）：

...
$(".title").mousemove(function(e) {
    if(e.buttons === 1) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
        traX = mouseX + 1640;
        traY = mouseY + 200;
        //console.log(traX, traY);
        $(".title").css({"background-position": traX + "px " + traY + "px"});
    }
});