Draggable фонового изображения с фоном размером: крышка

Question

У меня есть фиксированный DIV, который содержит изображение в качестве фона, как этого

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

Изображения перекрывает Div-поле. Пользователь должен иметь возможность перетаскивать изображение и новое фокусное положение : координаты должны быть доступны через jQuery сразу после того, как пользователь освободит мышь. Моя цель состоит в том, чтобы создать очень простой дерьмо эффект изображения так же, как в фейсбуке:

Как я могу achive это? И возможно ли даже показать переполненный фон с размером фона: обложка?

Answer 1

Вы можете использовать этот Plugin и попробовать

element.backgroundDraggable() 

Здесь у вас есть demo

Answer 2

Вам нужно обрабатывать mousemove события на DIV, и вычислить новый background-position оттуда.

Вот пример, чтобы вы начали: http://codepen.io/dghez/pen/ItxKE

Чтобы увидеть, если левая кнопка мыши нажата в mousemove обработчиком (для имитации сопротивления), проверьте e.buttons === 1 (MDN)

Update:

Модифицированный 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"}); 
    } 
});