jquery draggable

jquery draggable - 拖动时调整选择器大小(jquery draggable - resize selector while dragging)

我有一个问题，Jquery可拖动，我想拖动一个DIV，并在拖动时我会调整DIV的大小。 看起来像Jquery刚刚在启动时计算选择器的高度/宽度，调整大小后它将从开始计算高度/宽度而不是实际/现场，如果我使用容器它将无法正常工作。

这是一个例子： http ： //jsfiddle.net/zwQ2S/

$("#selector").draggable({ containment: "#container", scroll: false}); $("#selector").draggable( "option", "axis", "y"); $("#container").mousemove(function() { var margin =parseInt($("#selector").css("top")); if (margin > 10){ $("#selector").css("height", "100px"); } });

PS：我想使用draggable作为动态内容/加载的滚动条。

I have a problem with Jquery draggable, I want to drag a DIV and while dragged I will resize the DIV. Seems like Jquery calculate the height/width of the Selector just at initiation, after resize it will calculate the height/width from the begining not the actual/live and if I use a container it will not work properly.

Here is an example : http://jsfiddle.net/zwQ2S/

$("#selector").draggable({ containment: "#container", scroll: false}); $("#selector").draggable( "option", "axis", "y"); $("#container").mousemove(function() { var margin =parseInt($("#selector").css("top")); if (margin > 10){ $("#selector").css("height", "100px"); } });

PS: I want to use draggable for a scrollbar with dynamic content/loading.

最满意答案

我找到了解决方案在这里 ，最后的小提琴： http ： //jsfiddle.net/XLrNF/178/

var $container = $("#demo"); function resizeContainer(e, ui) { //resize container here var w1 = ui.helper.outerHeight(), w2 = $container.height(); //console.log([ui.position.left, w1, w2].join(' : ')); ui.position.top = Math.max(Math.min(ui.position.top, w2 - w1), 0); } $("#draggable").draggable({ axis: "y", drag: resizeContainer });

I found a solution Here, the final fiddle : http://jsfiddle.net/XLrNF/178/

var $container = $("#demo"); function resizeContainer(e, ui) { //resize container here var w1 = ui.helper.outerHeight(), w2 = $container.height(); //console.log([ui.position.left, w1, w2].join(' : ')); ui.position.top = Math.max(Math.min(ui.position.top, w2 - w1), 0); } $("#draggable").draggable({ axis: "y", drag: resizeContainer });