Magnetic poetry in DHTML

Kragen Sitaker Sat, 10 Dec 2005 15:44:40 -0800

Was pondering drag-and-drop, so I thought I'd put together a magnetic
poetry kit in DHTML --- the simplest possible use of drag-and-drop.
I took some time selecting words --- by hand, from the most common words
in the British National Corpus, and from actual poetry --- and removing
words I thought unsuitable.  I'm interested to hear feedback.


This is also online at http://pobox.com/~kragen/sw/magpoetry.html

Oh, and of course, I've only tried to make this work in Mozilla FireFox.


<html><head><title>Magnetic poetry in DHTML</title>
<script type="text/javascript">
function equals(a) {
    return function(b) { return a == b }
}
function has_class(classname) {
    return function(elem) {
        return elem.className.split(/\s+/).some(equals(classname))
    }
}

function move(node) {
    return function(ev) {
        ev.preventDefault()
        node.style.left = node.orig_offset_left + ev.screenX - node.origScreenX
        node.style.top = node.orig_offset_top + ev.screenY - node.origScreenY
    }
}

function kill(elem) { elem.parentNode.removeChild(elem) }

function release(node) {
    return function(ev) {
        document.removeEventListener('mousemove', node.mover_listener, true)
        document.removeEventListener('mouseup', node.releaser_listener, true)
        node.style.color = ''
        kill(node.origin)
    }
}

function start_drag(parent) {
    return function (ev) {
        ev.preventDefault()
        var node = ev.target
        while (node.parentNode != parent) node = node.parentNode
        var newnode = node.cloneNode(document)
        newnode.orig_offset_left = node.offsetLeft
        newnode.orig_offset_top = node.offsetTop
        newnode.style.position = 'absolute'
        newnode.style.left = newnode.orig_offset_left
        newnode.style.top = newnode.orig_offset_top
        newnode.style.display = 'block'
        newnode.style.color = '#7f7f7f'
        newnode.origScreenX = ev.screenX
        newnode.origScreenY = ev.screenY
        newnode.mover_listener = move(newnode)
        newnode.releaser_listener = release(newnode)
        newnode.origin = node
        document.addEventListener('mousemove', newnode.mover_listener, true)
        document.addEventListener('mouseup', newnode.releaser_listener, true)
        document.body.appendChild(newnode)
        make_draggable(newnode)
    }
}
function make_draggable(elem) {
    elem.addEventListener('mousedown', start_drag(elem.parentNode), true)
}
function make_contents_draggable(elem) {
    elem.addEventListener('mousedown', start_drag(elem), true)
}
function init() {
    Array.filter(document.all, 
has_class('dnd')).forEach(make_contents_draggable)
}
</script>
</head><body onload="init()">
<h1>Magnetic poetry DHTML</h1>
<p style="height: 20em"></p>
<p class="dnd">

<span>this</span> <span>we</span> <span>that</span> <span>are</span>
<span>back</span> <span>madonna</span> <span>sun</span>
<span>good</span> <span>possible</span> <span>to</span>
<span>boy</span> <span>piss</span> <span>within</span>
<span>might</span> <span>try</span> <span>compute</span>
<span>period</span> <span>it</span> <span>trade</span> <span>us</span>
<span>knowledge</span> <span>has</span> <span>but</span>
<span>school</span> <span>had</span> <span>language</span>
<span>is</span> <span>piece</span> <span>love</span> <span>to</span>
<span>leaves</span> <span>they</span> <span>door</span>
<span>my</span> <span>ly</span> <span>endless</span>
<span>right</span> <span>oil</span> <span>has</span> <span>shit</span>
<span>give</span> <span>heat</span> <span>do</span> <span>not</span>
<span>a</span> <span>major</span> <span>city</span> <span>or</span>
<span>his</span> <span>ocean</span> <span>land</span>
<span>radiant</span> <span>,</span> <span>s</span> <span>given</span>
<span>dawdle</span> <span>has</span> <span>s</span> <span>best</span>
<span>be</span> <span>one</span> <span>,</span> <span>like</span>
<span>and</span> <span>higher</span> <span>will</span>
<span>are</span> <span>in</span> <span>broken</span> <span>want</span>
<span>reach</span> <span>yellow</span> <span>do</span> <span>:</span>
<span>group</span> <span>last</span> <span>down</span> <span>it</span>
<span>I</span> <span>blue</span> <span>by</span> <span>well</span>
<span>hands</span> <span>it</span> <span>heart</span> <span>to</span>
<span>deal</span> <span>bid</span> <span>as</span> <span>every</span>
<span>ed</span> <span>food</span> <span>possible</span> <span>I</span>
<span>sea</span> <span>leg</span> <span>different</span>
<span>group</span> <span>bring</span> <span>some</span>
<span>home</span> <span>his</span> <span>outside</span>
<span>were</span> <span>close</span> <span>stem</span>
<span>who</span> <span>round</span> <span>always</span>
<span>spring</span> <span>able</span> <span>street</span>
<span>big</span> <span>main</span> <span>hair</span> <span>yet</span>
<span>wear</span> <span>.</span> <span>,</span> <span>wrap</span>
<span>your</span> <span>'s</span> <span>by</span> <span>about</span>
<span>November</span> <span>this</span> <span>her</span>
<span>I</span> <span>beneath</span> <span>er</span> <span>s</span>
<span>here</span> <span>like</span> <span>they</span> <span>I</span>
<span>idea</span> <span>gave</span> <span>d</span> <span>you</span>
<span>good</span> <span>year</span> <span>still</span>
<span>must</span> <span>America</span> <span>which</span>
<span>so</span> <span>water</span> <span>by</span> <span>y</span>
<span>seem</span> <span>s</span> <span>boy</span> <span>the</span>
<span>a</span> <span>fill</span> <span>were</span> <span>by</span>
<span>up</span> <span>do</span> <span>it</span> <span>the</span>
<span>this</span> <span>s</span> <span>curd</span> <span>blue</span>
<span>more</span> <span>I</span> <span>boat</span> <span>was</span>
<span>four</span> <span>became</span> <span>be</span>
<span>just</span> <span>over</span> <span>I</span> <span>will</span>
<span>life</span> <span>looking</span> <span>penetrate</span>
<span>pay</span> <span>him</span> <span>est</span> <span>dirt</span>
<span>was</span> <span>let</span> <span>such</span> <span>fall</span>
<span>sleep</span> <span>season</span> <span>;</span> <span>er</span>
<span>seem</span> <span>s</span> <span>strong</span> <span>what</span>
<span>likely</span> <span>it</span> <span>going</span>
<span>and</span> <span>hair</span> <span>walk</span> <span>un</span>
<span>er</span> <span>cup</span> <span>month</span> <span>s</span>
<span>what</span> <span>just</span> <span>run</span> <span>so</span>
<span>right</span> <span>we</span> <span>is</span> <span>there</span>
<span>or</span> <span>has</span> <span>s</span> <span>end</span>
<span>any</span> <span>back</span> <span>him</span> <span>ing</span>
<span>could</span> <span>is</span> <span>wrote</span>
<span>much</span> <span>roll</span> <span>turn</span> <span>s</span>
<span>use</span> <span>morning</span> <span>do</span>
<span>stood</span> <span>while</span> <span>soul</span>
<span>im</span> <span>y</span> <span>in</span> <span>a</span>
<span>sister</span> <span>women</span> <span>commune</span>
<span>,</span> <span>does</span> <span>and</span> <span>day</span>
<span>the</span> <span>I</span> <span>line</span> <span>it</span>
<span>some</span> <span>trade</span> <span>when</span>
<span>both</span> <span>black</span> <span>call</span> <span>ed</span>
<span>did</span> <span>anoint</span> <span>.</span> <span>ed</span>
<span>how</span> <span>in</span> <span>plans</span> <span>sky</span>
<span>life</span> <span>night</span> <span>would</span> <span>I</span>
<span>there</span> <span>paper</span> <span>,</span> <span>open</span>
<span>is</span> <span>do</span> <span>es</span> <span>I</span>
<span>blue</span> <span>yeah</span> <span>different</span>
<span>es</span> <span>man</span> <span>blossom</span>
<span>potatoes</span> <span>now</span> <span>list</span>
<span>I</span> <span>has</span> <span>summer</span> <span>fact</span>
<span>other</span> <span>land</span> <span>ice</span> <span>thy</span>
<span>peace</span> <span>his</span> <span>is</span> <span>years</span>
<span>cup</span> <span>American</span> <span>wet</span>
<span>him</span> <span>her</span> <span>quite</span>
<span>think</span> <span>give</span> <span>work</span> <span>or</span>
<span>minister</span> <span>at</span> <span>has</span>
<span>thought</span> <span>was</span> <span>has</span>
<span>much</span> <span>s</span> <span>success</span>
<span>mouth</span> <span>loss</span> <span>paper</span>
<span>sudden</span> <span>help</span> <span>move</span>
<span>ment</span> <span>cold</span> <span>then</span> <span>is</span>
<span>out</span> <span>,</span> <span>though</span> <span>wish</span>
<span>with</span> <span>claw</span> <span>of</span> <span>be</span>
<span>his</span> <span>y</span> <span>west</span> <span>is</span>
<span>come</span> <span>talk</span> <span>but</span> <span>may</span>
<span>,</span> <span>at</span> <span>am</span> <span>nobody</span>
<span>child</span> <span>they</span> <span>big</span> <span>s</span>
<span>only</span> <span>was</span> <span>work</span> <span>s</span>
<span>and</span> <span>wench</span> <span>house</span>
<span>what</span> <span>is</span> <span>January</span>
<span>you</span> <span>but</span> <span>real</span>
<span>during</span> <span>thee</span> <span>it</span>
<span>never</span> <span>gray</span> <span>red</span> <span>was</span>
<span>which</span> <span>large</span> <span>,</span> <span>him</span>
<span>above</span> <span>sir</span> <span>who</span> <span>blue</span>
<span>start</span> <span>dog</span> <span>y</span> <span>end</span>
<span>about</span> <span>so</span> <span>they</span> <span>same</span>
<span>to</span> <span>flower</span> <span>simple</span>
<span>were</span> <span>center</span> <span>stand</span>
<span>France</span> <span>by</span> <span>bring</span>
<span>last</span> <span>about</span> <span>we</span> <span>the</span>
<span>ed</span> <span>which</span> <span>men</span> <span>you</span>
<span>have</span> <span>I</span> <span>ly</span> <span>by</span>
<span>pig</span> <span>by</span> <span>d</span> <span>less</span>
<span>by</span> <span>we</span> <span>to</span> <span>me</span>
<span>brother</span> <span>first</span> <span>hold</span>
<span>in</span> <span>full</span> <span>up</span> <span>est</span>
<span>es</span> <span>winter</span> <span>made</span> <span>.</span>
<span>that</span> <span>part</span> <span>be</span> <span>no</span>
<span>from</span> <span>say</span> <span>she</span> <span>more</span>
<span>further</span> <span>eat</span> <span>y</span> <span>with</span>
<span>she</span> <span>rumor</span> <span>old</span> <span>if</span>
<span>and</span> <span>figure</span> <span>the</span>
<span>part</span> <span>British</span> <span>boy</span> <span>s</span>
<span>built</span> <span>could</span> <span>office</span>
<span>room</span> <span>die</span> <span>old</span>
<span>changes</span> <span>bless</span> <span>company</span>
<span>do</span> <span>apple</span> <span>title</span>
<span>aware</span> <span>I</span> <span>where</span> <span>ed</span>
<span>empty</span> <span>I</span> <span>last</span> <span>under</span>
<span>but</span> <span>quite</span> <span>let</span>
<span>three</span> <span>post</span> <span>:</span>
<span>working</span> <span>into</span> <span>Britain</span>
<span>flower</span> <span>could</span> <span>leave</span>
<span>some</span> <span>second</span> <span>such</span>
<span>tried</span> <span>free</span> <span>be</span> <span>as</span>
<span>s</span> <span>strike</span> <span>are</span> <span>too</span>
<span>?</span> <span>first</span> <span>first</span> <span>and</span>
<span>long</span> <span>are</span> <span>water</span>
<span>general</span> <span>each</span> <span>do</span>
<span>much</span> <span>behind</span> <span>as</span>
<span>love</span> <span>in</span> <span>new</span>
<span>imagine</span> <span>fall</span> <span>lead</span>
<span>,</span> <span>in</span> <span>s</span> <span>let</span>
<span>or</span> <span>coal</span> <span>like</span> <span>was</span>
<span>car</span> <span>with</span> <span>ability</span>
<span>on</span> <span>es</span> <span>of</span> <span>know</span>
<span>be</span> <span>by</span> <span>st</span> <span>in</span>
<span>.</span> <span>is</span> <span>can</span> <span>lose</span>
<span>st</span> <span>y</span> <span>we</span> <span>the</span>
<span>paint</span> <span>was</span> <span>green</span> <span>an</span>
<span>would</span> <span>time</span> <span>it</span> <span>her</span>
<span>window</span> <span>region</span> <span>I</span>
<span>more</span> <span>northern</span> <span>there</span>
<span>into</span> <span>ocean</span> <span>was</span>
<span>seem</span> <span>s</span> <span>make</span> <span>being</span>
<span>decision</span> <span>days</span> <span>cover</span>
<span>about</span> <span>through</span> <span>which</span>
<span>drug</span> <span>stop</span> <span>or</span> <span>Brit</span>
<span>work</span> <span>this</span> <span>since</span>
<span>third</span> <span>view</span> <span>air</span>
<span>whip</span> <span>another</span> <span>early</span>
<span>any</span> <span>one</span> <span>almost</span> <span>saw</span>
<span>even</span> <span>before</span> <span>as</span>
<span>them</span> <span>be</span> <span>cold</span> <span>went</span>
<span>so</span> <span>nothing</span> <span>one</span> <span>her</span>
<span>was</span> <span>y</span> <span>good</span> <span>couple</span>
<span>moon</span> <span>most</span> <span>I</span> <span>y</span>
<span>god</span> <span>but</span> <span>was</span> <span>is</span>
<span>will</span> <span>each</span> <span>may</span> <span>it</span>
<span>beyond</span> <span>it</span> <span>are</span> <span>fact</span>
<span>es</span> <span>candle</span> <span>these</span>
<span>should</span> <span>made</span> <span>it</span> <span>was</span>
<span>I</span> <span>upon</span> <span>father</span> <span>most</span>
<span>young</span> <span>public</span> <span>would</span>
<span>paper</span> <span>oak</span> <span>priest</span>
<span>ly</span> <span>ly</span> <span>ear</span> <span>if</span>
<span>into</span> <span>lose</span> <span>muscular</span>
<span>die</span> <span>main</span> <span>school</span>
<span>high</span> <span>rape</span> <span>first</span> <span>s</span>
<span>looking</span> <span>can</span> <span>last</span>
<span>be</span> <span>mountain</span> <span>likely</span>
<span>other</span> <span>million</span> <span>I</span> <span>er</span>
<span>pendant</span> <span>be</span> <span>swell</span>
<span>whole</span> <span>six</span> <span>all</span> <span>to</span>
<span>:</span> <span>remember</span> <span>evoke</span>
<span>the</span> <span>years</span> <span>end</span> <span>our</span>
<span>round</span> <span>pure</span> <span>but</span>
<span>around</span> <span>role</span> <span>through</span>
<span>from</span> <span>;</span> <span>like</span> <span>.</span>
<span>grip</span> <span>desert</span> <span>if</span> <span>s</span>
<span>y</span> <span>anoint</span> <span>now</span> <span>kept</span>
<span>news</span> <span>those</span> <span>political</span>
<span>will</span> <span>party</span> <span>so</span> <span>know</span>
<span>wretched</span> <span>it</span> <span>family</span>
<span>.</span> <span>finale</span> <span>two</span> <span>do</span>
<span>coming</span> <span>upon</span> <span>a</span>
<span>throb</span> <span>taken</span> <span>es</span>
<span>fuck</span> <span>energy</span> <span>look</span>
<span>no</span> <span>a</span> <span>think</span> <span>went</span>
<span>we</span> <span>sorry</span> <span>be</span> <span>looked</span>
<span>should</span> <span>says</span> <span>ing</span>
<span>hand</span> <span>it</span> <span>same</span> <span>image</span>
<span>earth</span> <span>life</span> <span>an</span> <span>wood</span>
<span>s</span> <span>terror</span> <span>no</span> <span>dark</span>
<span>at</span> <span>own</span> <span>stone</span>
<span>friend</span> <span>see</span> <span>walk</span>
<span>they</span> <span>s</span> <span>what</span> <span>the</span>
<span>limpid</span> <span>est</span> <span>hospital</span>
<span>his</span> <span>might</span> <span>ed</span> <span>win</span>
<span>he</span> <span>effect</span> <span>able</span> <span>was</span>
<span>his</span> <span>dim</span> <span>case</span> <span>dress</span>
<span>two</span> <span>know</span> <span>tree</span> <span>eye</span>
<span>soul</span> <span>even</span> <span>new</span>
<span>against</span> <span>'s</span> <span>more</span>
<span>ish</span> <span>,</span> <span>at</span> <span>milk</span>
<span>are</span> <span>er</span> <span>my</span> <span>rain</span>
<span>sparrow</span> <span>are</span> <span>got</span> <span>it</span>
<span>'s</span> <span>is</span> <span>this</span> <span>as</span>
<span>god</span> <span>despair</span> <span>?</span> <span>are</span>
<span>got</span> <span>of</span> <span>as</span> <span>poor</span>
<span>for</span> <span>those</span> <span>unto</span>
<span>reasons</span> <span>er</span> <span>yes</span>
<span>salt</span> <span>been</span> <span>cerulean</span>
<span>s</span> <span>between</span> <span>,</span> <span>rip</span>
<span>again</span> <span>better</span> <span>s</span>
<span>better</span> <span>his</span> <span>.</span> <span>him</span>
<span>fall</span> <span>many</span> <span>is</span> <span>are</span>
<span>can</span> <span>bad</span> <span>two</span> <span>and</span>
<span>by</span> <span>kitchen</span> <span>over</span>
<span>sleep</span> <span>there</span> <span>knife</span>
<span>would</span> <span>years</span> <span>er</span> <span>in</span>
<span>hot</span> <span>carry</span> <span>was</span>
<span>local</span> <span>last</span> <span>like</span> <span>he</span>
<span>something</span> <span>ed</span> <span>by</span>
<span>said</span> <span>yet</span> <span>is</span> <span>me</span>
<span>white</span> <span>news</span> <span>sense</span>
<span>any</span> <span>do</span> <span>this</span> <span>by</span>
<span>staff</span> <span>which</span> <span>to</span> <span>it</span>
<span>it</span> <span>rather</span> <span>what</span> <span>war</span>
<span>mountain</span> <span>use</span> <span>mother</span>
<span>each</span> <span>s</span> <span>bring</span> <span>great</span>
<span>it</span> <span>hand</span> <span>of</span>
<span>everything</span> <span>will</span> <span>game</span>
<span>win</span> <span>it</span> <span>we</span> <span>live</span>
<span>by</span> <span>as</span> <span>would</span> <span>.</span>
<span>head</span> <span>it</span> <span>this</span> <span>ample</span>
<span>are</span> <span>went</span> <span>record</span> <span>s</span>
<span>husband</span> <span>just</span> <span>thou</span>
<span>direct</span> <span>mind</span> <span>mold</span>
<span>always</span> <span>by</span> <span>half</span>
<span>visit</span> <span>out</span> <span>girl</span>
<span>past</span> <span>such</span> <span>I</span> <span>at</span>
<span>I</span> <span>.</span> <span>about</span> <span>December</span>
<span>diamond</span> <span>get</span> <span>ready</span>
<span>their</span> <span>off</span> <span>village</span>
<span>is</span> <span>decided</span> <span>not</span> <span>I</span>
<span>by</span> <span>ice</span> <span>go</span> <span>one</span>
<span>it</span> <span>which</span> <span>create</span>
<span>could</span> <span>made</span> <span>like</span>
<span>meat</span> <span>this</span> <span>cigar</span> <span>s</span>
<span>in</span> <span>four</span> <span>carry</span>
<span>algorithm</span> <span>we</span> <span>more</span>
<span>fire</span> <span>think</span> <span>are</span>
<span>springtime</span> <span>cat</span> <span>let</span>
<span>there</span> <span>there</span> <span>from</span>
<span>without</span> <span>cherry</span> <span>sea</span>
<span>cream</span> <span>as</span> <span>September</span>
<span>along</span> <span>number</span> <span>shine</span>
<span>along</span> <span>only</span> <span>foreign</span>
<span>back</span> <span>forest</span> <span>go</span>
<span>heart</span> <span>now</span> <span>but</span>
<span>enough</span> <span>of</span> <span>;</span> <span>but</span>
<span>I</span> <span>death</span> <span>price</span> <span>on</span>
<span>ass</span> <span>hard</span> <span>cream</span>
<span>middle</span> <span>the</span> <span>ed</span> <span>by</span>
<span>I</span> <span>kind</span> <span>it</span> <span>social</span>
<span>as</span> <span>we</span> <span>of</span> <span>puke</span>
<span>delight</span> <span>under</span> <span>only</span>
<span>tit</span> <span>in</span> <span>ing</span> <span>for</span>
<span>to</span> <span>sent</span> <span>icon</span> <span>there</span>
<span>is</span> <span>surface</span> <span>very</span>
<span>there</span> <span>what</span> <span>has</span> <span>s</span>
<span>light</span> <span>to</span> <span>as</span> <span>by</span>
<span>until</span>

</p>
</body></html>

Magnetic poetry in DHTML

Reply via email to