Question

我在这里遇到了一些问题，也许我找到了过去处理过这个问题的人。

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

我正在使用jQuery ui resizable和draggable。

我想弄清楚是否可以通过拖动画笔来调整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/

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

2 个答案: