Search code examples
javascriptjquerytokenmit-scratch

Scratch-style token fields in Javascript

I'm trying to make a replica of the drag-and-drop programming interface in Scratch <http://scratch.mit.edu>, but in javascript. I have the building blocks part done, but am specifically interested in how I might go about building the tokenized fields.

Scratch has fields that you can either enter numbers or text into, along with tokens that represent variables or operations, which in turn can accept their own numbers, text or tokens, and can nest further variables and operations and so on.

Example of Scratch's nested token system in a field: https://i.sstatic.net/falmA.png

I'm using jQuery along with jQuery UI for draggables and droppables. Any recommendations about how to go about making a field like this?

Solution

  • There already is a kind of Javascript duplicate of Scratch, called Waterbear

    Have a look at their implementation for ideas.