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 resizable没有可用的方法/事件来执行此操作。

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;
});

通过单击并拖动来创建框

1 个答案: