SOURCE CODE: Draggable Image Port

VIEW EXAMPLE




  Draggable Image Port | JavaScript Examples | UIZE JavaScript Framework
  
  
  
  
  
  
  






UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Draggable Image Port

In this example, an instance of Uize.Widget.ImagePort.Draggable is wired up to let you explore an image inside an image port. Click-and-drag on the image to pan it from side to side. Ctrl-click-and-drag up and down to zoom in and out, respectively. Additionally, sliders (instances of the Uize.Widgets.Slider.Widget class) are wired up to control the alignX and alignY state properties of the widget, and a slider and two select boxes are wired up to control the sizingValue, sizingUpperBound, and sizingLowerBound state properties. Event handlers wire the widgets bidirectionally, so dragging inside the image port updates the sliders, and dragging the sliders updates the image port.

alignY sizingUpperBound
sizingValue (0 to 3)
alignX sizingLowerBound