draggable sample

by Yoshiharu Kamata

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<div id="main">
<canvas id="target"></canvas>
</div>
<div id="slider"></div>
<div id="overview">
    <img id="range"/>
</div>
<div id="console"></div>

CSS

#main {
  width: 340px;
  height: 220px;
  border: 1px solid black;
}
#slider {
  width: 300px;
}
#target {
    width: 320px;
    height: 200px;
}
#overview {
  width: 160px;
  height: 100px;
  border: 1px solid red;
  margin: 10px 10px 10px 330px;
  overflow: hidden;
}
#range{
  width: 160px;
  height: 100px;
  background: gray;
}

CoffeeScript

$ ->
  canvas = $("#target").get(0) 
  ctx = canvas.getContext("2d")
  $range = $("#range")
  scale = 100
  x = 0
  y = 0
  cw = canvas.width
  ch = canvas.height
  plot = ->
    ctx.clearRect(0,0,cw,ch)
    ctx.save()
    ctx.scale(scale/100,scale/100)
    ctx.translate(-x,-y)
    ctx.strokeRect(10,10,200,100)
    ctx.restore()
    $range.attr("src",canvas.toDataURL())
  $("#range")
    .draggable(
      containment: "parent"
      drag: (e,ui)->
        x = ui.position.left
        y = ui.position.top
        plot()
    )
  plot()
  $("#slider").slider(
    value: 100
    max: 200
    change: (e,ui)->
      scale = ui.value
      plot()
      $range
        .width(160*100/ui.value)
        .height(100*100/ui.value)
  )