0
我正在處理的網站具有圖像縮放，並且縮放圖像可拖動。jQuery UI：對可拖動元素的包含是buggy
問題是，在當前版本中，您可以放大，然後將圖像完全拖出可視區域。
參見：http://testing.successfulsites.co.uk/s5/1.3.5.1.html（及放大）
（約在URL的差距對不起 - 我是一個新用戶，這樣不能發佈超過1個鏈接！）
所以，我一直試圖讓圖像被包含。
我採取的方法是使用基於當前縮放級別創建和調整大小的div上的遏制。
div包裹zoom-container div，並具有負邊距和正填充，以正確定位本身。
參見：http://testing.successfulsites.co.uk/s6/1.3.5.1.html（及放大）
注：我還沒有與遏制功能的「縮小」困擾 - 直到問題得到解決。
我已經添加了CSS，以便您可以看到涉及的各個div。
我遇到的問題是，當你放大並拖動它包含的圖像時 - 但只有當你讓手指離開鼠標按鈕時......然後遏制區域似乎重置，甚至跳躍 - 意味着你可以將圖像從觀看區域移開 - 只是不能一氣呵成。
的JS文件是在這裏：
http://testing.successfulsites.co.uk/s6/assets/js/functions.js
的CSS是在這裏：
http://testing.successfulsites.co.uk/s6/assets/style/main.css
下面是相關代碼：
在下面的功能...
$("#in").live("click",function() {
我有以下代碼...
if(currentZoom > 1) {
if ($('#zoom-meta-container').length == 0) {
$('#zoom-container').wrap('<div id="zoom-meta-container"></div>');
var container = $('#zoom-meta-container');
$('#zoom-container a').draggable({ containment: container });
$('#zoom-container').addClass('drag-cursor');
};
switch (currentZoom) {
case 1:
container.css('margin','-20% 0 0 -20%').css('padding','20%');
break;
case 2:
container.css('margin','-90% 0 0 -90%').css('padding','90%');
break;
case 3:
container.css('margin','-160% 0 0 -160%').css('padding','160%');
break;
case 4:
container.css('margin','-210% 0 0 -210%').css('padding','210%');
break;
};
任何想法..
1）我做錯了嗎？
2）如果有更好的方法解決原始問題？