Question

我正在制作像谷歌地图一样的可拖动图像。

此图片有网格。左栏需要冻结。所以我输出两次相同的图像。一个是主要形象。另一个是冷冻柱，窄而顶部。

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

任何网格的大小都是未知的，因此没有捕捉到网格。

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

请告知如何执行以下操作。感谢。

在x方向拖动时，只有大的移动。狭窄的人留下来。
在向y方向拖动时，大方向和窄方向同步移动。

Answer 1

聆听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); } });设置冻结div的顶部位置。

脚本

{{1}}

工作drag

可以用冷冻面板拖拽

1 个答案: