2017-05-01 9 views
2

I가 내가 노력하고있어 (릭 Strahl에 의해 this great example에서 가져온) 스플리터 - 사업부 jQuery를-크기 조정은 : DIV의 이벤트가 트리거되지 않습니다 크기 변경

에 의해 분리 된 두 개의 패널의 크기 조정을 가능하게하는 다음 코드 resize 이벤트를 발생 시키는데 어떻게 든 등록되지 않습니다. 여기에 내가 누락 된 아이디어가 있습니까? 이미 고마워.

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

CodePen

편집 : 이벤트가 발사되지 않는 이유 조금 늦게,하지만 난 아직 파악하지 않았습니다. 그러나, 지금은 내가 다른 스택 오버플로 포스트에서 발견되는 "드래그"이벤트를 통해 해결책을 발견, 어쩌면 내가 찾은 어떤 사람 :) 그래서

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

답변

0

에 도움이되는 몇 가지 종류가 있다는 것입니다 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> 

이러한 라이브러리 만 호출해야합니다.