Question

我有以下代码，它可以调整由splitter-div分隔的两个面板的大小（取自Rick Strahl的this great example）

我正在尝试触发调整大小事件，但不知何故，这是未注册的。我在这里缺少什么想法？谢谢。

   $(".flex-item-top").resizable({
      handleSelector: ".splitter",
      resizeWidth: false,
      resize: function(event, ui) {
        console.log("Let's get schwifty!")
      }
    })

CodePen

编辑：有点晚了，但我还没弄清楚为什么事件没有解雇。但是，现在我通过“拖动”事件找到了一个解决方案，我在另一个Stack Overflow帖子中找到了它，也许对某人有帮助:)）

var isDragging = false;
$(".splitter")
.mousedown(function() {
    isDragging = true;
})
.mousemove(function() {
  if (isDragging) {
     console.log('hello')
  } 
 })
.mouseup(function() {
    isDragging = false;
})

Answer 1

所以我发现jQuery-UI和调用的resizeable.js库之间存在某种冲突。当您省略jQuery-UI库时，您将获得拆分器移动。

   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

这些应该是您调用的唯一库。

jQuery-Resizable：不触发div的Resize事件

1 个答案: