jQuery – 拖动div css背景
我希望能够点击div中的鼠标并移动它的背景。 在谷歌搜索了很多，没有找到我想要的东西。
这是目标（显示的地图是要拖动的对象）： http ： //pontografico.net/pvt/gamemap/
有小费吗？
干杯!
好吧，让这个工作; 我想我已经解决了所有问题：
带有Bounding Limits的最终jQuery
$(document).ready(function(){ var $bg = $('.bg-img'), elbounds = { w: parseInt($bg.width()), h: parseInt($bg.height()) }, bounds = {w: 2350 - elbounds.w, h: 1750 - elbounds.h}, origin = {x: 0, y: 0}, start = {x: 0, y: 0}, movecontinue = false; function move (e){ var inbounds = {x: false, y: false}, offset = { x: start.x - (origin.x - e.clientX), y: start.y - (origin.y - e.clientY) }; inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w; inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h; if (movecontinue && inbounds.x && inbounds.y) { start.x = offset.x; start.y = offset.y; $(this).css('background-position', start.x + 'px ' + start.y + 'px'); } origin.x = e.clientX; origin.y = e.clientY; e.stopPropagation(); return false; } function handle (e){ movecontinue = false; $bg.unbind('mousemove', move); if (e.type == 'mousedown') { origin.x = e.clientX; origin.y = e.clientY; movecontinue = true; $bg.bind('mousemove', move); } else { $(document.body).focus(); } e.stopPropagation(); return false; } function reset (){ start = {x: 0, y: 0}; $(this).css('backgroundPosition', '0 0'); } $bg.bind('mousedown mouseup mouseleave', handle); $bg.bind('dblclick', reset); });
http://jsfiddle.net/userdude/q6r8f/4/
原始答案
HTML
CSS
div.bg-img { background-image: url(http://sofzh.miximages.com/jquery/Flexopecten_ponticus_2008_G1.jpg); background-position: 0 0; background-repeat: no-repeat; background-color: blue; border: 1px solid #aaa; width: 250px; height: 250px; margin: 25px auto; }
jQuery的
$(document).ready(function(){ var $bg = $('.bg-img'), origin = {x: 0, y: 0}, start = {x: 0, y: 0}, movecontinue = false; function move (e){ var moveby = { x: origin.x - e.clientX, y: origin.y - e.clientY }; if (movecontinue === true) { start.x = start.x - moveby.x; start.y = start.y - moveby.y; $(this).css('background-position', start.x + 'px ' + start.y + 'px'); } origin.x = e.clientX; origin.y = e.clientY; e.stopPropagation(); return false; } function handle (e){ movecontinue = false; $bg.unbind('mousemove', move); if (e.type == 'mousedown') { origin.x = e.clientX; origin.y = e.clientY; movecontinue = true; $bg.bind('mousemove', move); } else { $(document.body).focus(); } e.stopPropagation(); return false; } function reset (){ start = {x: 0, y: 0}; $(this).css('backgroundPosition', '0 0'); } $bg.bind('mousedown mouseup mouseleave', handle); $bg.bind('dblclick', reset); });
从ui draggable演示：
拖动DOM元素很简单，无需重新发明轮子。
http://jqueryui.com/demos/draggable/
编辑：div内的可拖动背景也是可能的。 请看这里的小提琴： http ： //jsfiddle.net/FyFZA/
这篇文章是我的问题的一个很好的起点。 我结合了上面的答案，另一个是关于获得背景图像的原始尺寸（ SO：如何在jQuery中获得背景图像大小？ ）
我的特殊设置我使用的是background-size:cover所以我必须确定背景图像的高度/宽度比例，并将其与容器的高度/宽度比率进行比较。 这意味着每个图像只允许在一个维度上滑动。
你可能不需要两个额外的东西。 我为我正在操作的元素添加了一个边框，以便让它易于查看，当我完成时将其删除。 我也用偏移值更新了输入，所以我可以将它们发送到服务器上。
我的评论往往非常冗长，所以它有点冗长，但我希望它对某人有所帮助。
我知道这是一个老post，但是如果你使用jQueryUI，另一个解决方案是在背景上创建一个透明元素，然后使用拖动回调来更新原始节点的backgroundPosition。 这是一个例子：
/* node is the element containing the background image */ /* width/height variables are just there if your background image is a different width/height then the container */ var transparent = $(''); transparent.css({ position: 'absolute', zIndex: 10, left: node.offset().left, top: this.node.offset().top, width: width || node.width(), height: height || node.height(), backgroundColor: '#fff', opacity: 0.2 }); $('body').append(transparent); options.config.drag = function(event, ui) { node.css({ backgroundPosition: (ui.position.left - ui.originalPosition.left) + 'px ' + (ui.position.top - ui.originalPosition.top) + 'px' }); }; $(transparent).draggable(options.config);
我故意留下一个不透明的白色背景颜色，这样你就可以在测试时看到这个元素。