Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQuery UI Drag and Drop with FunScript

DZone's Guide to

jQuery UI Drag and Drop with FunScript

· Web Dev Zone
Free Resource

Should you build your own web experimentation solution? Download this whitepaper by Optimizely to find out.

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)

Implementing an Experimentation Solution: Choosing whether to build or buy?

Topics:

Published at DZone with permission of Daniel Mohl, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}