我正在创建一个界面,允许用户放大图像,并在缩放蒙版div内拖动缩放版本.
我有一个200px×200px的div,我设置overflow：hidden.然后,我将一个std img(< img src =“etc”>)加载到div,即1000px x 1000px.
然后我使用jQuery
$("#my-image").draggable({ containment: [-85,83,99,222] });
这些数字是硬编码的.到目前为止,我只能通过反复试验找到他们
问题是,每次我更改页面(即在容器div上方插入另一个元素)时,页面大小变化,我的硬编码[x1,y1,x2,y2]停止正常工作.
主要的问题是我不完全明白[x1,y2] …
这是关于jQuery的文档：
http://docs.jquery.com/UI/Draggable#option-containment
我认为x1是最左边的可拖动点,我是对的,x2是最可拖拉的点吗？ (和y1&y2相同)？
如果是这样,动态计算它们的最佳策略是什么？
解决方法
$(this).draggable({
drag: function(event,ui) {
if (ui.position.top > 0) {
ui.position.top = 0;
}
var maxtop = ui.helper.parent().height() - ui.helper.height();
if ( ui.position.top < maxtop) {
ui.position.top = maxtop;
}
if ( ui.position.left > 0) {
ui.position.left = 0;
}
var maxleft = ui.helper.parent().width() - ui.helper.width();
if ( ui.position.left < maxleft) {
ui.position.left = maxleft;
}
}
});
