javascript - 在 jQuery 中调整元素大小时如何知道使用了哪个句柄

Question

对于我的项目，我需要知道用户使用哪个边框(“e”或“w”)来调整 div 的大小。那么知与不可以呢？

我明白了:

$(divProjet).resizable({
   handles: "e,w",
   grid: 71,
   maxWidth: 1498,
   minWidth: 69,
   containment: $($(this).parent()[0]).parent()[0],
   start: function () {

   },
   stop: function (event, ui) {
      var numDayModif = (ui.size[0] - ui.originalSize[0]) / 71;
   }
});

Answer 1

由于 jQuery UI 将元素插入可调整大小的 <div>对于每个句柄，您可以计算出每次开始调整大小时针对的是哪个句柄:

start: function (e) {
    var className = e.originalEvent.target.className.split(" ").pop();
    var side = className.replace("ui-resizable-","",className);
    console.log(side); // e or w
}

• e.originalEvent.target是“句柄”(DOM 元素)
• 我们获取完整的类名，拆分类，并使用 pop() 获取最后一个类. (最后一类类似于 ui-resizable-e
• 使用 replace() 从字符串中删除“ui-resizable-”位然后你收到剩下的(e 或 w)

注意:如果您也选择使用南北 handle ，它当然会起作用。

JSFiddle