如何通过拖动图像来调整div的大小？

Question

我在这里有一个小问题，也许我可以找到过去处理过此问题的人。

拖动图像时如何调整div的大小？

我正在使用可调整大小和可拖动的jQuery ui。

这是一个实时URL： http : //railmedia.ro/test/

我试图找出是否可以通过拖动画笔来调整div的大小。 所需的行为类似于进度条，只是它需要手动而不是自动完成。

谢谢

Answer 1

使用事件dragg来调整容器div的大小，就像它只会增加它的大小一样。

            $(function() {
            $(".basecoat").resizable({maxWidth:598, ghost:true});
            $(".basecoat img.brush").draggable({
  start: function() {

    getCurrentPositionContainer= getOffset($(".basecoat"));

    limitX=getCurrentPositionContainer.left;

    limitY=getCurrentPositionContainer.top;

  },
  drag: function() {

    getCurrentPositionDraggable = getOffset($(".basecoat img.brush"));

    toLimitX=getCurrentPositionDraggable.left;

    toLimitY=getCurrentPositonDraggable.top;


    if(toLimitX>=limitX){

      currentWidth= $(".basecoat").width;

      $(".basecoat").width=currentWidth+10;

    }

    if(toLimitY>=limitY){
       currentHeight= $(".basecoat").height;

      $(".basecoat").height=currentHeight+10;
    }

    //set function to less 

  },
  stop: function() {
     //set any function like stop,
  }
}
);


function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
}
return { top: _y, left: _x };
}

Answer 2

在此期间，我发现了一个CSS问题，可以解决我的问题。 我用以下这一行扩展了可调整大小的触发器的区域：

.ui-resizable-e {width:67px;}

这是小提琴： http : //jsfiddle.net/rmuser/MZWKr/4/