Adding dragndrop.ts

Also switching $-style document.ready to a noconflict style

Author: blast-hardcheese

examples/draganddrop/dragndrop.js

@@ -1,5 +1,5 @@
-$(function () {
-
+/// <reference path="../../ts/rx.jquery.d.ts" />
+jQuery(function ($) {
     var dragTarget = $('#dragTarget');
 
     // Get the three major events
@@ -8,8 +8,8 @@ $(function () {
     var mousedown = dragTarget.bindAsObservable('mousedown').publish().refCount().map(function (event) {
         // calculate offsets when mouse down
         event.preventDefault();
-        return { 
-            left: event.clientX - dragTarget.offset().left, 
+        return {
+            left: event.clientX - dragTarget.offset().left,
             top: event.clientY - dragTarget.offset().top,
         };
     });

examples/draganddrop/dragndrop.ts

@@ -0,0 +1,32 @@
+/// <reference path="../../ts/rx.jquery.d.ts" />
+
+jQuery(function ($: JQueryStatic) {
+    var dragTarget = $('#dragTarget');
+
+    // Get the three major events
+    var mouseup = dragTarget.bindAsObservable('mouseup').publish().refCount();
+    var mousemove = $(document).bindAsObservable('mousemove').publish().refCount();
+    var mousedown = dragTarget.bindAsObservable('mousedown').publish().refCount().map(function (event: JQueryMouseEventObject) {
+        // calculate offsets when mouse down
+        event.preventDefault();
+        return {
+            left: event.clientX - dragTarget.offset().left,
+            top: event.clientY - dragTarget.offset().top,
+        };
+    });
+
+    // Combine mouse down with mouse move until mouse up
+    var mousedrag = mousedown.selectMany(function(imageOffset) {
+        return mousemove.map(function (pos: JQueryMouseEventObject) {
+            // calculate offsets from mouse down to mouse moves
+            return {
+                left: pos.clientX - imageOffset.left, top: pos.clientY - imageOffset.top
+            };
+        }).takeUntil(mouseup);
+    });
+
+    var subscription = mousedrag.subscribe (function (pos) {
+        // Update position
+        $('#dragTarget').css({top: pos.top, left: pos.left});
+    });
+});