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

【问题标题】：How can I resize a div by dragging an image?如何通过拖动图像来调整 div 的大小？
【发布时间】：2014-07-15 17:01:57
【问题描述】：

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

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

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

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

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

谢谢

【问题讨论】：

标签： javascript jquery draggable resizable

【解决方案1】：

使用事件 dragg 来调整容器 div 的大小，比如 as ，它只会增长它..

            $(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 };
}

【讨论】：

非常感谢。不幸的是，您提供的代码实际上并不能解决问题。

【解决方案2】：

与此同时，我发现了一个对我有用的 CSS 问题。我用这一行扩展了可调整大小的触发器区域：

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

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

【讨论】：