jQuery UI的可调整大小的 - 操作的方向(jQuery UI resizable - dir

2019-07-30 07:42发布

如何确定大小调整操作的方向是什么? 我试着用搜索引擎的是,发现在jQuery UI的一票,是说这是固定的。 但对如何使用它没有任何文档。

Answer 1:

不知道你的意思,你想限制调整操作到特定的轴,或者如果你想知道什么方向调整大小实际发生英寸

RaYell的答复工作,如果你想前者。 我将讨论后者。

如果你设置了一个可调整大小是这样的:

var r = $("#resizable");
r.resizable();

比方说,你想知道用户松开鼠标按钮 ,发生了什么方向调整大小英寸 让我们团结调整大小停止事件的函数:

r.bind('resizestop', function(event, ui) {
    // determine resize deltas
    var delta_x = ui.size.width - ui.originalSize.width;
    var delta_y = ui.size.height - ui.originalSize.height;
}

使用过的UI对象,我们可以从旧的大小减去新的大小决定大小的相对变化。 在这之后,你可以使用delta_xdelta_y但是你的愿望。 让我们建立一个对应于手柄的一个字符串。

r.bind('resizestop', function(event, ui) {

    // determine resize deltas
    var delta_x = ui.size.width - ui.originalSize.width;
    var delta_y = ui.size.height - ui.originalSize.height;

    // build direction string
    var dir = '';

    if (delta_y > 0) { 
        dir += 's';
    } else if (delta_y < 0) { 
        dir += 'n';         
    }      

    if (delta_x > 0) { 
        dir += 'e';
    } else if (delta_x < 0) { 
        dir += 'w';
    }

    // do something with this string
    alert(dir);        
});

请注意,这并不一定会返回的句柄实际使用,如果你对元件两侧手柄进行调整大小,只有它的净方向。



Answer 2:

在一开始,调整和停止回调:

$(this).data('resizable').axis


Answer 3:

我知道这是很久以前的一个问题,但所提供的解决方案并没有解决我的问题。 我找到一种方式来获得在启动功能的处理器,它的工作在FF和铬。 我的组织不支持IE所以这是未经测试,但在这种情况下,FF方式应该工作,因为它是更标准的事件处理。

$(".resizable").resizable({
    start: function (event, ui) {
        var dir = event.toElement ? event.toElement : event.originalEvent.target;
    }
});

dir是那么实际的处理程序,你必须找到这个类和方向(从类列表分析,如果我到那里我会后我做什么)。

它是知道在哪个调整大小的调整大小的原因很多之前发生的方向是有用的,我真的觉得jQuery的应包括一个办法知道哪些手柄已被抓住。

后来编辑:jQueryUI的干将提供为他们的API,在这种情况下获得的句柄列表你只是做

var handles = $( ".selector" ).resizable( "option", "handles" );

(这是直接从马口)。 就我而言,我只是检查,如果它是“n”或“S”(向上或向下),然后计算出尺寸的变化中的对象由启动功能,抓住了原来的大小,并使用类似的循环调整大小功能保持计算它。 如果大小减小的方向是向上,如果从南部手柄和从北控点,如果,如果是增加它的意思的方向是从北手柄从南方手柄向下或向上。

为了得到它是否是“n”或“S”被拉到,我只是抓住了dir从上面切一切,但最后一个字母关的类名返回,因为类是类似ui-handle-s

它实际上是比较幽默,因为我没有最终使用的大部分这一点,因为我改变了它只能从底部调整。 因为我不使用它,我希望别人发现这是很有帮助的。



Answer 4:

我认为选择handles是你所追求的:

$(selector).resizable({handles: 'n, s, e, w'})

其中字母代表的地理方向:

  • N - 北(上)
  • 秒 - 南(下)
  • Ë - 东(右)
  • W - 西(左)
  • NE - 东北(左上)
  • SE - 东南(左下)
  • NW - 西北(左上)
  • SW - 西南(左下)

使用您喜欢上面的任何子集。

你可以找到该选项的文件在这里



Answer 5:

$(".ui-resizable-handle").live("mousedown", function(e) {
    $.ui.curResizeDirection = this.className.split("-").pop();
    console.log($.ui.curResizeDirection);
});


Answer 6:

试试这个代码:

$( "#resizable" ).resizable({
    handles: "n, e, s, w",
    resize: function( event, ui ) {
       //your codes here
    }
});

股利是在四个方向用手柄特性调整。

看看这里:

http://www.landcoder.com/4-dynamic-interactive-code-snippets-jquery-705#resizable



Answer 7:

的JSONx已经得到了很好的解决方案,但你还可以利用内置的事件:

$('#resizable').resizable({
    handles: 'n,s',
    start: function( event, ui ) {
        var handleDirection = event.srcElement.className.split("-").pop();
    }
});

该代码使得“#resizable”元素可调整大小,并把该元素的南北两侧把手。 如果北手柄点击并拖动然后handleDirection是“N”。 我一直无法找到一个类似的方式与“停止”事件做到这一点。



文章来源: jQuery UI resizable - direction of operation