可凍結面板可拖動

Question

我正在製作可拖動的圖像，如谷歌地圖。

此圖像有網格。左列需要凍結。所以我輸出相同的圖像兩次。一個是主要的形象。另一個是凍結的柱子，狹窄而頂部。

.freezed { 
    width: 120px; 
    overflow: hidden; 
    position: absolute; 
    z-index: 1; 
    left: 0; 
    top: 0; 
} 

任何網格的大小是未知的，所以沒有捕捉到網格。

http://jsfiddle.net/7TMj8/2/

請就如何做到以下幾點建議。謝謝。

1. 在x方向拖動時，只有大的方向移動。狹窄的一個停留。
2. 在y方向拖動時，大方和窄方向同步移動。

Answer 1

收聽drag事件draggable找到移動方向。在拖動時使用.css()設置凍結格的頂部位置。

腳本

$('.draggable').draggable({ 
    // Narrow one is moving in Y direction while dragging the big one in Y direction 
    drag: function (event, ui) { 
     var xpos = ui.position.left; 
     var ypos = ui.position.top; 
     $(".freezed").css('top', ypos); 
    } 
}); 

工作DEMO