jQuery-Resizable：div的调整大小事件未触发

Question

I have the following code, which enables the resizing of two panels separated by a splitter-div (taken from this great example by Rick Strahl)

I'm trying to trigger a resize event but somehow this is not registered. Any ideas what I'm missing here? Thanks already.

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

CodePen

EDIT: A bit late, but I still haven't figured out why the event isn't firing. However, for now I found a solution via a "drag" event, which I found in another Stack Overflow post, maybe it is helpful to someone :)

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

Answer 1

So what I found is that there is some sort of conflict between jQuery-UI and and the resizeable.js library that is called. When you omit the jQuery-UI library you get the splitter movement.

   <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>

These should be the only libraries you call.