Javascript 背景图像剪裁到可拖动的div

我试着制作一个有完整背景图像的div，上面有一个容器的div，这个div是可拖动的，当拖动它时，它显示与背景相同的图像，但被改变了

好吧，这其中有一些

到目前为止，我的CSS：

.contain{
    position:relative;
}

#dummy{ 
    background:url(http://i.imgur.com/CxYGDBq.jpg);
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
}

#dummy2{
    position:absolute;
    top:0;
    z-index:99;
    left:0;
}

.mao{
    background: url(http://i.imgur.com/UbNyhzS.png);
    width:250px;
    height:300px;
    position:absolute;
    bottom:0;
    z-index:999;
    background-size:contain;
}

.screen{
    width:960px;
    height:995px;
    background-color:pink;
    position:relative;
    left:32px;
    top:30px;
    background-attachment:fixed;
    background: url(http://i.imgur.com/yjR8SCL.jpg);

}

---

对于我假设你想要做的事情，我已经编辑了你的笔以反映适当的更改。你可以看到

嵌套不当 更改的第一件事是将希望Dragable

成为

元素子元素的div切换

CSS图像URL

---

还有一件事需要注意——在CSS中指定URL时，需要将其用引号括起来。这些“$url\u在这里”

如果我正确理解您的要求，您可以通过查找可拖动对象移动时的当前位置，然后使用这些值设置

屏幕背景的
背景位置，从而产生某种x光眼镜效果

var imageOffset = {
    top: 30,
    left: 32
};

$(function() {
    var screenHeight = $('body').height() - 300; // 300: moa height

    $(".screen").css('background-position', -(imageOffset.left) + 'px ' + -(screenHeight + imageOffset.top) + 'px');

    $(".mao").draggable({
        axis: "x",
        drag: function(event, ui) {
            $(".screen").css('background-position', -(ui.position.left + imageOffset.left) + 'px ' + -(ui.position.top + imageOffset.top) + 'px');
        }
    });
})

代码笔示例：

您还可以使用相同的代码将手约束到屏幕的左/右边界。官方文档中有一个这样做的代码示例：
如果这不是您想要的，请随时告诉我缺少什么，我会更新我的答案问题中的链接已失效。。。你还有密码吗？最好在问题中添加一个可运行的代码段。