如何通過拖動圖像來調整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/