通過單擊並拖動創建一個框

Question

我想創建一個框，我可以通過單擊和拖動來調整大小。我有一個jsfiddle在這裏 - http://jsfiddle.net/A2fr4/2/ - 這很接近，但沒有。在這個jsfiddle中，我可以按下鼠標按鈕來創建框，然後我可以回來調整框的大小。我真正想要的是能夠在一個動作中單擊並拖動，然後將框展開以跟隨光標位置，正是我所擁有的，除非我不想在第一次單擊後再回來並再次單擊它開始調整大小。

有人能看到我失蹤的東西嗎？

感謝

$('<div>') 
     .resizable(groupBox_resizeOps) 
     .css({'border'  : '1px dotted black', 
       'left'  : groupBox_x0, 
       'top'   : groupBox_y0, 
       'position' : 'absolute', 
       'width':'0px', 
       'height':'0px' 
      }) 
     .addClass('groupBox') 
     .appendTo('#canvas') 
     ; 

Answer 1

您需要保存最後添加的元素自行調整寬度和高度。可調整大小的JQueryUI還沒有可用的方法/事件。

Working demo

// Additional variables 
var lastAddedElement; 
var groupBox_x0; 
var groupBox_y0; 
$('#canvas').mousedown(function(e) { 

      /* 
       Create a resizable group box 
      */ 

      console.log("document mousedown: e.target is ", e.target.id, "Starting a group box"); 
      groupBox_x0 = e.pageX;  
      groupBox_y0 = e.pageY; 
      lastAddedElement = $('<div>') 
        .resizable(groupBox_resizeOps) 
        .css({'border'  : '1px dotted black', 
          'left'  : groupBox_x0, 
          'top'   : groupBox_y0, 
          'position' : 'absolute', 
          'width':'0px', 
          'height':'0px' 
         }) 
        .addClass('groupBox') 
        .appendTo('#canvas') 
        ;    
}).mousemove(function(e){ 
    // Set the width and height to the last added element. 
    if (lastAddedElement != null) { 
     groupBox_x1 = e.pageX; 
     groupBox_y1 = e.pageY; 
     lastAddedElement.css({'width': groupBox_x1 - groupBox_x0, 
           'height': groupBox_y1 - groupBox_y0}); 
    } 
}).mouseup(function(e){ 
    // Clear the variable 
    lastAddedElement = null; 
});