jQuery UI Drag and Drop with FunScript

If you've been keeping up with activity in the F# world, you have no doubt seen great strides in a number of areas such as expansion of support for F# on different platforms and an ever increasing number of libraries and frameworks. One of these libraries that I've been playing with of late is named FunScript.

What is FunScript?

The FunScript website provides a nice definition.

FunScript is a lightweight F# library that lets you rapidly develop single-page applications. You can connect to external data sources and call REST APIs with intellisense, produce dashboards using JavaScript visualization libraries and write asynchronous computations easily without explicit callbacks.

One of the cool features that FunScript provides is a TypeScript type provider that allows any TypeScript definition file to be used to generate strongly typed access to the associated JavaScript lib. Let's look at an example of how to do this.

jQuery UI Drag/Drop Example

In this example, we create a simple TODO type of application using jQuery UI, FunScript, and the TypeScript type provider that FunScript provides. You can find the full example with detailed comments on the FunScript GitHub site.

	[<FunScript.JS>]
	module Page
	open System.IO
	open System.Reflection
	open Microsoft.FSharp.Quotations
	open FunScript
	open FunScript.TypeScript
	open FunScript.FunctionHelpers
	type ts = FunScript.TypeScript.Api<
	@"../Typings/jquery.d.ts
	../Typings/jqueryui.d.ts
	../Typings/lib.d.ts" >
	let addTasksToElement (elementSelector:string) tasks =
	let tasks = tasks
	|> Array.mapi (fun index task ->
	"<div class='ui-widget-content draggable'>" +
	task + "</div>" |> box)
	ts.jQuery.Invoke(elementSelector).append tasks |> ignore
	let populateTasks () =
	let tasksToDo =
	[| "Persist the tasks to a data store."
	"Add new tasks."
	"Remove a task." |]
	let tasksDone =
	[| "Allow tasks to be moved to done."
	"Add dynamic population of tasks." |]
	addTasksToElement ".tasksNotStarted" tasksToDo
	addTasksToElement ".tasksDone" tasksDone
	let initDragAndDrop () =
	let dragSettings = ts.Draggable(revert = "invalid", cursor = "move",
	helper = "clone" )
	ts.jQuery.Invoke(".draggable").draggable(dragSettings) |> ignore
	let dropSettings = ts.Droppable(hoverClass = "ui-state-active",
	accept = ".draggable")
	dropSettings.drop <- immediateFn
	<| TupledDelegate<ts.Event, ts.DroppableEventUIParam,
	ts.JQuery>(fun e ui ->
	ui.draggable.appendTo(e.target))
	ts.jQuery.Invoke(".droppable").droppable(dropSettings) |> ignore
	let main() =
	populateTasks()
	initDragAndDrop()
	do FunScript.Runtime.Run(components=Interop.Components.all)

view raw jQueryUI_FunScript.fs hosted with ❤ by GitHub