kineticjs가 드래그를 제한하기 위해 dragBoundsFunc을 준수하지 않습니다.

Question

이 example jsfiddle에 두 상자의 드래그를 수직 및 수평으로 제한하는 kineticjs를 dragBoundsFunc과 관련 시키게 할 수 없습니다. 아래 코드를 작동 시키려면 어떻게해야합니까?

$(function() { 
    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: $("#container").width(), 
     height: window.innerHeight * 0.9, 
     listening: true 
    }); 

    var scrollAreas = new Kinetic.Group(); 
    var scrollBars = new Kinetic.Group(); 
    var scrollBarsLayer = new Kinetic.Layer(); 

    var hscrollArea = new Kinetic.Rect({ 
     x: 10, 
     y: stage.getHeight() - 30, 
     width: stage.getWidth() - 40, 
     height: 20, 
     fill: "gray", 
     opacity: 0.3 
    }); 

    var hscroll = new Kinetic.Rect({ 
     x: 10, 
     y: stage.getHeight() - 30, 
     width: 130, 
     height: 20, 
     fill: "orange", 
     draggable: true, 
      dragBoundsFunc: function(pos) { 
      return { 
       x: pos.x, 
       y: this.getAbsolutePostion().y 
      }; 
      }, 
     opacity: 0.9, 
     stroke: "black", 
     strokeWidth: 1 
    }); 

    var vscrollArea = new Kinetic.Rect({ 
     x: stage.getWidth() - 30, 
     y: 10, 
     width: 20, 
     height: stage.getHeight() - 40, 
     fill: "gray", 
     opacity: 0.3 
    }); 

    var vscroll = new Kinetic.Rect({ 
     x: stage.getWidth() - 30, 
     y: 10, 
     width: 20, 
     height: 70, 
     fill: "orange", 
     draggable: true, 
     dragBoundsFunc: function(pos) { 
      return { 
       x: this.getAbsolutePosition().x, 
       y: pos.y 
      }; 
     }, 
     opacity: 0.9, 
     stroke: "black", 
     strokeWidth: 1 
    }); 

    scrollBars.on("mouseover", function() { 
     document.body.style.cursor = "pointer"; 
    }); 
    scrollBars.on("mouseout", function() { 
     document.body.style.cursor = "default"; 
    }); 

    scrollAreas.add(hscrollArea); 
    scrollAreas.add(vscrollArea); 
    scrollBars.add(hscroll); 
    scrollBars.add(vscroll); 

    scrollBarsLayer.add(scrollAreas); 
    scrollBarsLayer.add(scrollBars); 
    stage.add(scrollBarsLayer); 
}); 

Answer 1

그것은 dragBoundFunc (그리고하지 dragBoundsFunc는 s주의).