具有background-size：cover的可拖动背景图像

Question

I have a fixed div that contains an image as a background like this

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

The image overlaps the div-box. The user should be able to drag the image and the new background-position: coordinates should be accessible somehow via jQuery just after the user releases the mouse. My aim is to create a very simple crap image effect just like in facebook:

How can I achive this? And is it even possible to show the overflowig background with background-size:cover?

Answer 1

You can use this Plugin , and try

element.backgroundDraggable()

Here you have a demo

Answer 2

You need to handle the mousemove event on the div, and calculate the new background-position from there.

Here is an example to get you started: http://codepen.io/dghez/pen/ItxKE

To see if the left mouse button is pressed within the mousemove handler (to simulate a drag), check e.buttons === 1 ( MDN )

Update:

Modified mousemove handler from the example, which lets you drag the background (while annoyingly selecting the text at the same time...):

...
$(".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"});
    }
});