diff --git a/examples/drag-and-drop/drag-and-drop-1.rkt b/examples/drag-and-drop/drag-and-drop-1.rkt
index 5fd6f0a..12a3e13 100644
--- a/examples/drag-and-drop/drag-and-drop-1.rkt
+++ b/examples/drag-and-drop/drag-and-drop-1.rkt
@@ -1,6 +1,10 @@
#lang planet dyoo/whalesong
-(require (planet dyoo/whalesong/web-world))
+(require (planet dyoo/whalesong/web-world)
+ (planet dyoo/whalesong/resource))
+
+(define-resource view.html)
+(define-resource style.css)
;; A small drag-and-drop example using the web-world library.
;;
@@ -12,3 +16,47 @@
(define-struct box (id x y))
+
+;; add-fresh-box: world view -> world
+;; Given a world, creates a new world within the boundaries of the playground.
+(define (add-fresh-box w v)
+ (define-values (max-width max-height) (width-and-height "playground"))
+ (define new-world (cons (make-box (fresh-id)
+ (random max-width)
+ (random max-height))
+ w))
+ new-world)
+
+
+
+;; FIXME: do some javascript stuff here to get at this.
+;;
+(define (width-and-height element-id)
+ (values 500 500))
+
+
+(define (draw w v)
+ (foldl (lambda (a-box v)
+ (cond
+ [(view-focus? v (box-id a-box))
+ v]
+ [else
+ (view-append-child v
+ (xexp->dom `(span (@ (class "box")
+ (id ,(box-id a-box))
+ (style ,(format "position: relative; left: ~apx; top: ~apx"
+ (box-x a-box)
+ (box-y a-box))))
+ "I am a box")))]))
+ (view-focus v "playground")
+ w))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(define the-view (view-bind-many view.html
+ ["add" "click" add-fresh-box]))
+
+(big-bang (list)
+ (initial-view the-view)
+ (to-draw draw))
+
\ No newline at end of file
diff --git a/examples/drag-and-drop/style.css b/examples/drag-and-drop/style.css
index fceb373..178ea33 100644
--- a/examples/drag-and-drop/style.css
+++ b/examples/drag-and-drop/style.css
@@ -1,17 +1,15 @@
-html {
- width: 100%;
- height: 100%;
-}
-
-body {
- width: 100%;
- height: 100%;
-}
#playground {
background-color: lightgray;
border: 1px solid black;
- width: 70%;
- height: 70%;
+ width: 500px;
+ height: 500px;
display: block;
+}
+
+
+.box {
+ position: relative;
+ background-color: orange;
+ border: 1px solid black;
}
\ No newline at end of file
diff --git a/examples/drag-and-drop/view.html b/examples/drag-and-drop/view.html
index 2771d5f..50e4714 100644
--- a/examples/drag-and-drop/view.html
+++ b/examples/drag-and-drop/view.html
@@ -10,7 +10,7 @@
This is the playground.
-
+