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-ressized-”位然后您收到剩下的内容(e 或 w)

注意:如果您也选择使用北 handle 和南 handle ，它当然可以工作。

JSFiddle