Repository: tomhodgins/dragon
Branch: gh-pages
Commit: e61f7968df24
Files: 8
Total size: 43.8 KB

Directory structure:
gitextract_7svm6w9f/

├── LICENSE
├── README.md
├── code_of_conduct.md
├── css/
│   ├── basic.css
│   └── data-buttons.css
├── dragon-annotated.js
├── dragon.js
└── index.html

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2016 Tommy Hodgins

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# Dragon.js 🐉

`dragon.js` is a bookmarklet that lets you drag any element on a website using a mouse or touchscreen. The goal is to speed up in-browser design critiques and brainstorming new layout ideas.

[![](http://i.imgur.com/VubC6xd.png)](https://www.youtube.com/embed/ytIZbXnNOMM)

## How to use

You can test the functionality with demo content on `index.html`, where you will also find the ‘pretty’ source code for the bookmarklet.

Demo at http://staticresource.com/dragon

To use this on other websites you have two options: run it as JavaScript on the page, or create a bookmarklet.

### How to create a bookmarklet

- Create a bookmark
- Edit the URL
- replace the URL with `javascript:` followed by the contents of `dragon.js`

Now you can load load any page, then tap the bookmarklet to enter 'dragon' mode 

### How to run as JavaScript

You have two options here as well. All browsers except mobile safari (iPad and iPhone) will allow you to simply replace the URL in the address bar of a loaded website with `javascript:` and then write whatever JavaScript you want. I find this easier than a bookmarklet on desktop.

The other way is by opening your Developer Tools in the browser you can paste the contents of `dragon.js` into the JavaScript Console and enter it and it will run on the page as well.

# 🐲 —happy hacking!


================================================
FILE: code_of_conduct.md
================================================
# The Hacker Code of Conduct

This project abides by the following code of conduct:

Both this project and its maintainers are inclusive to all people, and welcome all ideas. True diversity of thought builds perspective and benefits all of us. Diversity depends on the presence of differing opinions, this code of conduct establishes acceptable professional behaviour and does not police speech or opinions.

- No ad-hominem attacks will be tolerated against any project maintainer, contributor, or user
- No prolonged disturbance of shared collaborative space will be tolerated
- The values we uphold are: excellence, innovation, fairness, and freedom

Violations of the above rules will be handled on a case-by-case basis, in a direct and reasonable way.


================================================
FILE: css/basic.css
================================================
/*

# The Mad CSScientist's Basic CSS Stylesheet
written by Tommy Hodgins: https://gist.github.com/tomhodgins/e330ec1826d1cde2b8b0

## Usage
Add this stylesheet to barebones HTML documents to instantly add some sensible defaults for text or documentation

    <link href=http://staticresource.com/basic.css rel=stylesheet>

This stylesheet contains multiple themes. To apply a theme add the attribute `data-theme` with the value `book`, `dark`, or `code` to the HTML tag.

    <html data-theme=dark>

*/

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
  outline: none;
}
::-moz-selection {
  color: #fff;
  text-shadow: #007931 1px 1px 1px;
  background-color: #26ba62 !important;
}
::-webkit-selection {
  color: #fff;
  text-shadow: #007931 1px 1px 1px;
  background-color: #26ba62 !important;
}
::selection {
  color: #fff;
  text-shadow: #007931 1px 1px 1px;
  background-color: #26ba62 !important;
}
::-webkit-input-placeholder {
  color: rgba(0,0,0,.5);
}
:-moz-placeholder {
  color: rgba(0,0,0,.5);
}
::-moz-placeholder {
  color: rgba(0,0,0,.5);
}
:-ms-input-placeholder {
  color: rgba(0,0,0,.5);
}
::-ms-input-placeholder {
  color: rgba(0,0,0,.5);
}
:placeholder-shown {
  color: rgba(0,0,0,.5);
}
html {
  color: #333;
  font-size: 10pt;
  line-height: 1.4;
  font-weight: 400;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  background: rgba(0,0,0,.1);
  background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,.1) 100vh);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100vh,rgba(0,0,0,.1)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,.1) 100vh);
  background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,.1) 100vh);
  background: -ms-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,.1) 100vh);
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,.1) 100vh);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb00', endColorstr='#dddddd00',GradientType=0 );
  font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', 'Fira Sans', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
}
body {
  margin: 0 auto;
  max-width: 850px;
  min-height: 100%;
  padding: 2em;
}
q:before {content: '\201c'}
q:after  {content: '\201d'}
q q:before {content: '\2018'}
q q:after  {content: '\2019'}
h1, h2, h3, h4, h5, h6 {
  color: #555;
  margin: .5em 0;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.2;
  font-family: 'Fira Sans', 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
  word-break: break-word;
}
h1 {
  color: #333;
  text-align: center;
  font-size: 480%;
  font-weight: 700;
  line-height: 1;
  text-shadow: white 0 -1px 0;
}
h1 + h2 {
  color: #777;
  margin-top: -1em;
  margin-bottom: 1.5em;
  font-size: 200%;
  line-height: 1.4;
  font-weight: 300;
  text-align: center;
}
h2 {
  font-size: 300%;
}
h3 {
  font-size: 220%;
}
h4 {
  font-size: 180%;
}
h5 {
  font-size: 140%;
}
h6 {
  font-size: 120%;
}
a {
  color: slateblue;
  text-decoration: none;
  outline: none !important;
}
a:hover,
a:focus {
  color: darkslateblue;
}
hr {
  border: none;
  height: 1px;
  background: #ccc;
}
:not(pre) > code {
  color: #333;
  background: #def;
  display: inline-block;
  line-height: 1.3;
  padding: 0 .3em;
  margin: 0 .15em;
  border-radius: 3px;
  box-shadow: rgba(0,0,0,.1) 0 1px 0;
  font-family: 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
  max-width: 100%;
  word-break: break-word;
}
:not(pre) > code a {
  color: indigo;
}
pre {
  color: #839496;
  display: block;
  width: 100%;
  padding: 1em;
  margin: 1em 0 2em 0;
  border-radius: 3px;
  font-size: 12pt;
  font-family: 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
  word-break: break-word;
  white-space: pre-wrap;
  font-kerning: auto;
  background: #002b36;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: inset rgba(0,0,0,.075) 0 -3px 10px,
              inset rgba(255,255,255,.15) 0 1px 0,
              rgba(0,0,0,.3) 0 1px .5px,
              rgba(0,0,0,.15) 0 3px 5px;
}
pre > code {
  box-shadow: none !important;
}
li {
  font-size: 12pt;
  padding: .25em 0;
}
p {
  margin: 0;
  font-weight: 400;
  font-size: 12pt;
}
* + p {
  margin-top: .5em;
}
input:not([type=checkbox]):not([type=radio]),
textarea {
  width: 100%;
  font-size: 12pt;
  margin-bottom: 1em;
  padding: 10px 8px;
}
blockquote {
  color: #777;
  margin: 1em auto 0 auto;
  padding: 1em 2em;
  position: relative;
  font-family: 'Fira Sans', 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
}
blockquote:before {
  content: '';
  display: block;
  width: 5px;
  height: 100%;
  background: currentColor;
  position: absolute;
  top: 0;
  left: 0;
  opacity: .5;
}
blockquote p {
  color: #333;
  font-size: 250%;
  font-weight: 500;
  font-style: italic;
}
blockquote li {
  color: #333;
  font-size: 160%;
  font-style: italic;
}
blockquote footer,
blockquote cite {
  display: block;
  font-style: normal;
  margin-top: .5em;
  padding: 0;
  color: currentColor;
  font-size: 125%;
  text-align: left;
}
blockquote footer:before,
blockquote cite:before {
  content: '— ';
}
footer {
  color: #777;
  font-size: 11pt;
  text-align: center;
  padding: 2em .5em;
}
a,
input,
textarea,
button,
label,
iframe,
audio,
video {
  touch-action: manipulation;
}
[class*="float-"] {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: default;
  pointer-events: none;
}
[data-tooltip][class*="float-"]{
  pointer-events: all;
}
@media (min-width: 500px) {
  .float-left {
    float: left;
    margin: 0 .5em .5em 0;
    max-width: 50%;
  }
  .float-right {
    float: right;
    margin: 0 0 .5em .5em;
    max-width: 50%;
  }
}
@media (max-width: 500px) {
  html {
    font-size: 7.5pt;
  }
}
/* Book Theme */
[data-theme=book] {
  color: #632;
  background: tan;
  box-shadow: inset burlywood 0 0 50vmin;
  font-family: 'PT Serif', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;
}
[data-theme=book] h1,
[data-theme=book] h2,
[data-theme=book] h3,
[data-theme=book] h4,
[data-theme=book] h5,
[data-theme=book] h6 {
  color: #742;
  text-shadow: none;
  font-family: 'Playfair Display', 'PT Serif', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;
  letter-spacing: 0;
  font-weight: 700;
}
[data-theme=book] h1 {
  color: #632;
}
[data-theme=book] h1 + h2 {
  font-weight: 400;
}
[data-theme=book] code,
[data-theme=book] pre {
  color: currentColor;
  background: transparent;
  border: 1px solid currentColor;
  box-shadow: none;
}
[data-theme=book] blockquote {
  color: #632;
  font-family: 'Playfair Display', 'PT Serif', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;
}
[data-theme=book] blockquote p {
  color: #632;
}
[data-theme=book] blockquote li {
  color: #632;
  font-size: 160%;
}
[data-theme=book] a {
  color: maroon;
}
[data-theme=book] a:focus,
[data-theme=book] a:hover {
  color: #c00;
}
[data-theme=book] hr {
  background: #742;
}
[data-theme=book] footer {
  color: #742;
}
[data-theme=book] footer a {
  color: #632;
}
/* Code Theme */
[data-theme=code] {
  color: #839496;
  background: #073642;
}
[data-theme=code] ::-moz-selection {
  color: #002b36;
  text-shadow: none !important;
  background-color: #eee8d5 !important;
}
[data-theme=code] ::-webkit-selection {
  color: #002b36;
  text-shadow: none !important;
  background-color: #eee8d5 !important;
}
[data-theme=code] ::selection {
  color: #002b36;
  text-shadow: none !important;
  background-color: #eee8d5 !important;
}
[data-theme=code] ::-webkit-input-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=code] :-moz-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=code] ::-moz-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=code] :-ms-input-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=code] ::-ms-input-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=code] :placeholder-shown {
  color: rgba(255,255,255,.3);
}
[data-theme=code] select {
  color: rgba(255,255,255,.3);
}
[data-theme=code] h1,
[data-theme=code] h2,
[data-theme=code] h3,
[data-theme=code] h4,
[data-theme=code] h5,
[data-theme=code] h6 {
  color: #839496;
}
[data-theme=code] h1 {
  color: #eee8d5;
  text-shadow: #002b36 0 2px 0;
}
[data-theme=code] code,
[data-theme=code] pre {
  color: #839496;
  background: #002b36;
  font-weight: 400;
  border: none;
  box-shadow: rgba(0,0,0,.15) 0 1px 0;
}
[data-theme=code] a {
  color: #eee8d5;
}
[data-theme=code] a:focus,
[data-theme=code] a:hover {
  color: white;
}
[data-theme=code] blockquote {
  color: #839496;
}
[data-theme=code] blockquote p {
  color: #eee8d5;
}
[data-theme=code] blockquote li {
  color: #eee8d5;
  font-size: 160%;
}
[data-theme=code] hr {
  background: #839496;
}
[data-theme=code] footer {
  color: #839496;
}
[data-theme=code] footer a {
  color: #eee8d5;
}
/* Dark Theme */
[data-theme=dark] {
  color: #ccc;
  background: #333;
  background: -moz-linear-gradient(top, #222 0%, #333 75vh);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(75vh,#333));
  background: -webkit-linear-gradient(top, #222 0%,#333 75vh);
  background: -o-linear-gradient(top, #222 0%,#333 75vh);
  background: -ms-linear-gradient(top, #222 0%,#333 75vh);
  background: linear-gradient(to bottom, #222 0%,#333 75vh);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22222200', endColorstr='#33333300',GradientType=0 );
}
[data-theme=dark] ::-moz-selection {
  color: #fff;
  text-shadow: #205 1px 1px 1px !important;
  background-color: royalblue !important;
}
[data-theme=dark] ::-webkit-selection {
  color: #fff;
  text-shadow: #205 1px 1px 1px !important;
  background-color: royalblue !important;
}
[data-theme=dark] ::selection {
  color: #fff;
  text-shadow: #205 1px 1px 1px !important;
  background-color: royalblue !important;
}
[data-theme=dark] ::-webkit-input-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=dark] :-moz-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=dark] ::-moz-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=dark] :-ms-input-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=dark] ::-ms-input-placeholder {
  color: rgba(255,255,255,.3);
}
[data-theme=dark] :placeholder-shown {
  color: rgba(255,255,255,.3);
}
[data-theme=dark] select {
  color: rgba(255,255,255,.3);
}
[data-theme=dark] h1,
[data-theme=dark] h2,
[data-theme=dark] h3,
[data-theme=dark] h4,
[data-theme=dark] h5,
[data-theme=dark] h6 {
  color: #aaa;
}
[data-theme=dark] h1 {
  color: #eee;
  text-shadow: #222 0 2px 0;
}
[data-theme=dark] code {
  color: #333;
  background: royalblue;
  font-weight: 400;
  border: none;
  box-shadow: #222 0 1px 0;
}
[data-theme=dark] pre {
  color: #333;
  background: royalblue;
  font-weight: 400;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: inset rgba(0,0,0,.075) 0 -3px 10px,
              inset rgba(255,255,255,.15) 0 1px 0,
              rgba(0,0,0,.3) 0 1px .5px,
              rgba(0,0,0,.15) 0 3px 5px;
}
[data-theme=dark] blockquote p {
  color: #eee;
}
[data-theme=dark] blockquote li {
  color: #eee;
  font-size: 160%;
}
[data-theme=dark] a {
  color: royalblue;
}
[data-theme=dark] a:focus,
[data-theme=dark] a:hover {
  color: cornflowerblue;
}
[data-theme=dark] hr {
  background: #555;
}


================================================
FILE: css/data-buttons.css
================================================
/*

# The Mad CSScientist's Buttons
written by Tommy Hodgins: https://gist.github.com/tomhodgins/16786c10f4b37d122d16

## Usage
Include a `<link>` to this file in your HTML.

    <link href=data-buttons.css rel=stylesheet>

To apply button styles to an element, add the `data-button` attribute.
Add `green`, `red`, `blue`, `grey` and `outline` values to the `data-button` attribute for different color themes.
Add a class of `disabled`, or add a `disabled` or `hidden` attribute to an element to display a disabled button.

    <a data-button href=#>link</a>
    <label data-button=blue>label</label>
    <input data-button=green type=button value=Button>
    <a data-button=red href=# disabled>disabled</a>

*/

[data-button] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  margin: .5em auto;
  padding: .5em .6em !important;
  text-decoration: none !important;
  outline: none;
  background: #ff8900 !important;
  background: -moz-linear-gradient(top, #ff8900 0%, #ff3d00 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8900), color-stop(100%,#ff3d00)) !important;
  background: -webkit-linear-gradient(top, #ff8900 0%,#ff3d00 100%) !important;
  background: -o-linear-gradient(top, #ff8900 0%,#ff3d00 100%) !important;
  background: -ms-linear-gradient(top, #ff8900 0%,#ff3d00 100%) !important;
  background: linear-gradient(to bottom, #ff8900 0%,#ff3d00 100%) !important;
  font-family: 'Source Sans Pro', 'Myriad Pro', 'Open Sans', Roboto, Myriad, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-kerning: auto;
  text-decoration: none;
  text-align: center;
  font-size: 14pt;
  line-height: 1.2 !important;
  color: white !important;
  text-shadow: #e20 1px 1px 0;
  border-radius: 3px;
  border: 1px solid #f60;
  border-bottom-color: #e20;
  box-shadow: inset #f20 0 -5px 15px, inset #fc6 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
  vertical-align: baseline;
}
[data-button]:hover,
[data-button]:focus {
  color: white !important;
  background: #fa3 !important;
  background: -moz-linear-gradient(top, #fa3 0%, #f30 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa3), color-stop(100%,#f30)) !important;
  background: -webkit-linear-gradient(top, #fa3 0%,#f30 100%) !important;
  background: -o-linear-gradient(top, #fa3 0%,#f30 100%) !important;
  background: -ms-linear-gradient(top, #fa3 0%,#f30 100%) !important;
  background: linear-gradient(to bottom, #fa3 0%,#f30 100%) !important;
  box-shadow: inset #f40 0 -5px 15px, inset #ffd28a 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(255,200,0,.5) 0 0 10px;
}
[data-button]:active {
  color: rgba(255,255,255,.9) !important;
  background: #f50 !important;
  border: 1px solid #f00;
  border-bottom-color: #d10;
  box-shadow: inset #f40 0 -5px 15px, inset #ffd28a 0 1px 1px;
}
/* Disabled & Hidden */
[data-button].disabled,
[data-button][hidden],
[data-button][disabled] {
  opacity: .5;
  pointer-events: none;
}
/* Blue Theme */
[data-button*=blue] {
  background: #0cf !important;
  background: -moz-linear-gradient(top, #0cf 0%, #0080ff 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0cf), color-stop(100%,#0080ff)) !important;
  background: -webkit-linear-gradient(top, #0cf 0%,#0080ff 100%) !important;
  background: -o-linear-gradient(top, #0cf 0%,#0080ff 100%) !important;
  background: -ms-linear-gradient(top, #0cf 0%,#0080ff 100%) !important;
  background: linear-gradient(to bottom, #0cf 0%,#0080ff 100%) !important;
  text-shadow: #06e 1px 1px 0;
  border: 1px solid #07f;
  border-bottom-color: #02e;
  box-shadow: inset #0065ff 0 -5px 15px, inset #99ffff 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}
[data-button*=blue]:hover,
[data-button*=blue]:focus {
  background: #7df !important;
  background: -moz-linear-gradient(top, #7df 0%, #07f 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7df), color-stop(100%,#07f)) !important;
  background: -webkit-linear-gradient(top, #7df 0%,#07f 100%) !important;
  background: -o-linear-gradient(top, #7df 0%,#07f 100%) !important;
  background: -ms-linear-gradient(top, #7df 0%,#07f 100%) !important;
  background: linear-gradient(to bottom, #7df 0%,#07f 100%) !important;
  box-shadow: inset #08f 0 -5px 15px, inset #cef 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(0,200,255,.5) 0 0 10px;
}
[data-button*=blue]:active {
  background: #05f !important;
  border: 1px solid #00f;
  border-bottom-color: #01d;
  box-shadow: inset #04f 0 -5px 15px, inset #8ad2ff 0 1px 1px;
}
/* Green Theme */
[data-button*=green] {
  background: #6a1 !important;
  background: -moz-linear-gradient(top, #6a1 0%, #360 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6a1), color-stop(100%,#360)) !important;
  background: -webkit-linear-gradient(top, #6a1 0%,#360 100%) !important;
  background: -o-linear-gradient(top, #6a1 0%,#360 100%) !important;
  background: -ms-linear-gradient(top, #6a1 0%,#360 100%) !important;
  background: linear-gradient(to bottom, #6a1 0%,#360 100%) !important;
  text-shadow: #062 1px 1px 0;
  border: 1px solid #480;
  border-bottom-color: #005822;
  box-shadow: inset #072 0 -5px 15px, inset #8e8 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}
[data-button*=green]:hover,
[data-button*=green]:focus {
  background: #6d4 !important;
  background: -moz-linear-gradient(top, #6d4 0%, #360 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d4), color-stop(100%,#360)) !important;
  background: -webkit-linear-gradient(top, #6d4 0%,#360 100%) !important;
  background: -o-linear-gradient(top, #6d4 0%,#360 100%) !important;
  background: -ms-linear-gradient(top, #6d4 0%,#360 100%) !important;
  background: linear-gradient(to bottom, #6d4 0%,#360 100%) !important;
  box-shadow: inset #064 0 -5px 15px, inset #8e8 0 1px 1px, rgba(0, 255, 75, 0.5) 0 0 10px, rgba(0,0,0,.15) 0px 1px 1px;
}
[data-button*=green]:active {
  background: #340 !important;
  border: 1px solid #005822;
  border-bottom-color: #052;
  box-shadow: inset #040 0 -5px 15px, inset #8e8 0 1px 1px;
}
/* Red Theme */
[data-button*=red] {
  background: #a11 !important;
  background: -moz-linear-gradient(top, #a11 0%, #800 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a11), color-stop(100%,#800)) !important;
  background: -webkit-linear-gradient(top, #a11 0%,#800 100%) !important;
  background: -o-linear-gradient(top, #a11 0%,#800 100%) !important;
  background: -ms-linear-gradient(top, #a11 0%,#800 100%) !important;
  background: linear-gradient(to bottom, #a11 0%,#800 100%) !important;
  text-shadow: #600 1px 1px 0;
  border: 1px solid #800;
  border-bottom-color: #500;
  box-shadow: inset #700 0 -5px 15px, inset #e88 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}
[data-button*=red]:hover,
[data-button*=red]:focus {
  background: #d44 !important;
  background: -moz-linear-gradient(top, #d44 0%, #800 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d44), color-stop(100%,#800)) !important;
  background: -webkit-linear-gradient(top, #d44 0%,#800 100%) !important;
  background: -o-linear-gradient(top, #d44 0%,#800 100%) !important;
  background: -ms-linear-gradient(top, #d44 0%,#800 100%) !important;
  background: linear-gradient(to bottom, #d44 0%,#800 100%) !important;
  box-shadow: inset #600 0 -5px 15px, inset #e88 0 1px 1px, rgba(255, 0, 0, 0.5) 0 0 10px, rgba(0,0,0,.15) 0px 1px 1px;
}
[data-button*=red]:active {
  background: #600 !important;
  border: 1px solid #500;
  border-bottom-color: #400;
  box-shadow: inset #400 0 -5px 15px, inset #e88 0 1px 1px;
}
/* Grey Theme */
[data-button*=grey] {
  background: #475875 !important;
  background: -moz-linear-gradient(top, #475875 0%, #36455d 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#475875), color-stop(100%,#36455d)) !important;
  background: -webkit-linear-gradient(top, #475875 0%,#36455d 100%) !important;
  background: -o-linear-gradient(top, #475875 0%,#36455d 100%) !important;
  background: -ms-linear-gradient(top, #475875 0%,#36455d 100%) !important;
  background: linear-gradient(to bottom, #475875 0%,#36455d 100%) !important;
  text-shadow: #151d31 1px 1px 0;
  border: 1px solid #36455d;
  border-bottom-color: #151d31;
  box-shadow: inset #151d31 0 -5px 15px, inset #ccf 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}
[data-button*=grey]:hover,
[data-button*=grey]:focus {
  background: #617699 !important;
  background: -moz-linear-gradient(top, #617699 0%, #475875 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#617699), color-stop(100%,#475875)) !important;
  background: -webkit-linear-gradient(top, #617699 0%,#475875 100%) !important;
  background: -o-linear-gradient(top, #617699 0%,#475875 100%) !important;
  background: -ms-linear-gradient(top, #617699 0%,#475875 100%) !important;
  background: linear-gradient(to bottom, #617699 0%,#475875 100%) !important;
  box-shadow: inset #2d3950 0 -5px 15px, inset #ccf 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(200,200,255,.5) 0 0 10px;
}
[data-button*=grey]:active {
  background: #151d31 !important;
  border: 1px solid #151d31;
  border-bottom-color: #0a0f22;
  box-shadow: inset #2d3950 0 -5px 15px, inset #ccf 0 1px 1px;
}
/* Outline Theme */
[data-button*=outline] {
  color: inherit !important;
  background: transparent !important;
  text-shadow: none;
  border: 1px solid currentColor;
  border-bottom-color: currentColor;
  box-shadow: none;
  font-weight: 400 !important;
  opacity: .75 !important;
}
[data-button*=outline].disabled,
[data-button*=outline][hidden],
[data-button*=outline][disabled] {
  opacity: .25 !important;
}
[data-button*=outline]:hover,
[data-button*=outline]:focus {
  color: inherit !important;
  background: transparent !important;
  border: 1px solid currentColor;
  border-bottom-color: currentColor;
  box-shadow: none;
  opacity: 1 !important;
}
[data-button*=outline]:active {
  color: inherit !important;
  background: transparent !important;
  border: 1px solid currentColor;
  border-bottom-color: currentColor;
  box-shadow: inset rgba(0,0,0,.1) 0 0 .3em;
}
/* Semi-Flat Buttons */
[data-button*="semiflat"]:not([data-button=outline]),
[data-theme=book] [data-button]:not([data-button=outline]),
[data-theme=rfi] [data-button]:not([data-button=outline]),
[data-button*="semiflat"]:not([data-button=outline]):hover,
[data-theme=book] [data-button]:not([data-button=outline]):hover,
[data-theme=rfi] [data-button]:not([data-button=outline]):hover,
[data-button*="semiflat"]:not([data-button=outline]):focus,
[data-theme=book] [data-button]:not([data-button=outline]):focus,
[data-theme=rfi] [data-button]:not([data-button=outline]):focus {
  font-weight: 600;
  text-shadow: rgba(0,0,0,.2) 1px 1px 0;
  box-shadow: inset rgba(255,255,255,.3) 0 1px 0;
  font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
}
[data-theme=rfi] [data-button] {
  font-size: 12pt !important;
}
[data-theme=rfi] [data-button*=blue] {
  text-shadow: #0c65b3 1px 1px 0 !important;
  border: 1px solid #06f !important;
  border-bottom-color: #02e !important;
  background: #2d9eff !important;
  background: -moz-linear-gradient(top, #2d9eff 0%, #1b88e6 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d9eff), color-stop(100%,#1b88e6)) !important;
  background: -webkit-linear-gradient(top, #2d9eff 0%,#1b88e6 100%) !important;
  background: -o-linear-gradient(top, #2d9eff 0%,#1b88e6 100%) !important;
  background: -ms-linear-gradient(top, #2d9eff 0%,#1b88e6 100%) !important;
  background: linear-gradient(to bottom, #2d9eff 0%,#1b88e6 100%) !important;
}
[data-theme=rfi] [data-button*=blue]:hover,
[data-theme=rfi] [data-button*=blue]:focus {
  background: #3af !important;
  background: -moz-linear-gradient(top, #3af 0%, #1b88e6 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3af), color-stop(100%,#1b88e6)) !important;
  background: -webkit-linear-gradient(top, #3af 0%,#1b88e6 100%) !important;
  background: -o-linear-gradient(top, #3af 0%,#1b88e6 100%) !important;
  background: -ms-linear-gradient(top, #3af 0%,#1b88e6 100%) !important;
  background: linear-gradient(to bottom, #3af 0%,#1b88e6 100%) !important;
}
[data-theme=rfi] [data-button*=blue]:active {
  background: #05f !important;
  border: 1px solid #00f !important;
  border-bottom-color: #01d !important;
}
[data-theme=rfi] [data-button*=grey] {
  text-shadow: #555 1px 1px 0 !important;
  border: 1px solid #7a7a7a !important;
  border-bottom-color: #555 !important;
  background: #999 !important;
  background: -moz-linear-gradient(top, #999 0%, #7a7a7a 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#7a7a7a)) !important;
  background: -webkit-linear-gradient(top, #999 0%,#7a7a7a 100%) !important;
  background: -o-linear-gradient(top, #999 0%,#7a7a7a 100%) !important;
  background: -ms-linear-gradient(top, #999 0%,#7a7a7a 100%) !important;
  background: linear-gradient(to bottom, #999 0%,#7a7a7a 100%) !important;
}
[data-theme=rfi] [data-button*=grey]:hover,
[data-theme=rfi] [data-button*=grey]:focus {
  background: #bababa !important;
  background: -moz-linear-gradient(top, #bababa 0%, #7a7a7a 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#7a7a7a)) !important;
  background: -webkit-linear-gradient(top, #bababa 0%,#7a7a7a 100%) !important;
  background: -o-linear-gradient(top, #bababa 0%,#7a7a7a 100%) !important;
  background: -ms-linear-gradient(top, #bababa 0%,#7a7a7a 100%) !important;
  background: linear-gradient(to bottom, #bababa 0%,#7a7a7a 100%) !important;
}
[data-theme=rfi] [data-button*=grey]:active {
  background: #7a7a7a !important;
  border: 1px solid #555 !important;
  border-bottom-color: #555 !important;
}
/* Light Grey Theme */
[data-theme=rfi] [data-button*=lightgrey] {
  color: #888 !important;
  text-shadow: rgba(0,0,0,.1) 1px 1px 0 !important;
  border: 1px solid #bbb !important;
  border-bottom-color: #aaa !important;
  background: #eee !important;
  background: -moz-linear-gradient(top, #efefef 0%, #eee 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#eee)) !important;
  background: -webkit-linear-gradient(top, #efefef 0%,#eee 100%) !important;
  background: -o-linear-gradient(top, #efefef 0%,#eee 100%) !important;
  background: -ms-linear-gradient(top, #efefef 0%,#eee 100%) !important;
  background: linear-gradient(to bottom, #efefef 0%,#eee 100%) !important;
}
[data-theme=rfi] [data-button*=lightgrey]:hover,
[data-theme=rfi] [data-button*=lightgrey]:focus {
  background: #efefef !important;
  background: -moz-linear-gradient(top, #efefef 0%, #bababa 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bababa)) !important;
  background: -webkit-linear-gradient(top, #efefef 0%,#bababa 100%) !important;
  background: -o-linear-gradient(top, #efefef 0%,#bababa 100%) !important;
  background: -ms-linear-gradient(top, #efefef 0%,#bababa 100%) !important;
  background: linear-gradient(to bottom, #efefef 0%,#bababa 100%) !important;
}
[data-theme=rfi] [data-button*=grey]:active {
  background: #eee !important;
  background: -moz-linear-gradient(top, #bababa 0%, #efefef 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#efefef)) !important;
  background: -webkit-linear-gradient(top, #bababa 0%,#efefef 100%) !important;
  background: -o-linear-gradient(top, #bababa 0%,#efefef 100%) !important;
  background: -ms-linear-gradient(top, #bababa 0%,#efefef 100%) !important;
  background: linear-gradient(to bottom, #bababa 0%,#efefef 100%) !important;
  border: 1px solid #aaa !important;
  border-bottom-color: #999 !important;
}

================================================
FILE: dragon-annotated.js
================================================
// Let's create some variables we can use later. Since they will all equal nothing right now, we can say they are all equal to zero in one shot.
var grab=startX=startY=oldTop=oldLeft=0;

// When you click, prevent the default behaviour for that event
document.addEventListener('click',function(e){e.preventDefault()},true);

// On mousedown or touchstart, run the pick() function
document.addEventListener('mousedown',pick);
document.addEventListener('touchstart',pick);

// This is the pick function
function pick(e){

// Prevent the default action
  e.preventDefault();

// If the element being clicked/tapped isn't the body or HTML element, do the following
  if (e.target!==document.documentElement && e.target!==document.body){

// Set 'grab' to the time right now
    grab=Date.now();

// Add a 'data-drag' attribute to the picked element and assign the time they started grabbing it
    e.target.setAttribute('data-drag',grab);

// Add `position: relative;` to the picked element
    e.target.style.position='relative';

// Remember the original `top: ;` and `left: ;` values, or if they aren't set yet go with 0 instead
    oldTop=e.target.style.top.split('px')[0]||0;
    oldLeft=e.target.style.left.split('px')[0]||0;

// That's all we do for the element when we start clicking or tapping
  }

// Let's remember the start x and y coordinates of the cursor when starting a click or tap
  startX=e.clientX||e.touches[0].clientX;
  startY=e.clientY||e.touches[0].clientY;
}

// All the time you move the mouse or drag your finger, run the function drag()
document.addEventListener('mousemove',drag);
document.addEventListener('touchmove',drag);

// This is the drag function
function drag(e){

// If grab isn't empty, there's currently an object being dragged, do this
  if (grab!==''){

// Let's find the element on the page whose data-drag="" value matches the value of grab right now
    var element=document.querySelector('[data-drag="'+grab+'"]');

// And to that element, let the new value of `top: ;` be equal to the old top position, plus the difference between the original top position and the current cursor position
    element.style.top=parseInt(oldTop)+parseInt((e.clientY||e.touches[0].clientY)-startY)+'px';

// And let the new value of `left: ;` be equal to the old left position, plus the difference between the original left position and the current cursor position
    element.style.left=parseInt(oldLeft)+parseInt((e.clientX||e.touches[0].clientX)-startX)+'px';

// That's all we do for dragging elements
  }
}

// On mouseup or touchend, run the release() function
document.addEventListener('mouseup',release);
document.addEventListener('touchend',release);

// The release function empties grab, forgetting which element has been picked.
function release(e){
  grab='';
}

// On mouseover, run the over() function
document.addEventListener('mouseover',over);

// This is the over() function
function over(e){

// Set the cursor to 'move' wihle hovering an element you can reposition
  e.target.style.cursor='move'

// Add a green box-shadow to show what container your hovering on
  e.target.style.boxShadow='inset lime 0 0 1px, lime 0 0 1px'
}

// On mouseover, run the out() function
document.addEventListener('mouseout',out);

// This is the out() function
function out(e){

  // Remove the move cursor and green box-shadow
  e.target.style.cursor=e.target.style.boxShadow=''
}

================================================
FILE: dragon.js
================================================
/*dragon*/var b=X=Y=T=L=0;document.addEventListener("click",function(a){a.preventDefault()},!0);document.addEventListener("mousedown",c);document.addEventListener("touchstart",c);function c(a){a.preventDefault();a.target!==document.documentElement&&a.target!==document.body&&(b=Date.now(),a.target.setAttribute("data-drag",b),a.target.style.position="relative",T=a.target.style.top.split("px")[0]||0,L=a.target.style.left.split("px")[0]||0);X=a.clientX||a.touches[0].clientX;Y=a.clientY||a.touches[0].clientY}document.addEventListener("mousemove",d);document.addEventListener("touchmove",d);function d(a){if(""!==b){var e=document.querySelector('[data-drag="'+b+'"]');e.style.top=parseInt(T)+parseInt((a.clientY||a.touches[0].clientY)-Y)+"px";e.style.left=parseInt(L)+parseInt((a.clientX||a.touches[0].clientX)-X)+"px"}}document.addEventListener("mouseup",f);document.addEventListener("touchend",f);function f(){b=""}document.addEventListener("mouseover",g);function g(a){a.target.style.cursor="move";a.target.style.boxShadow="inset lime 0 0 1px,lime 0 0 1px"}document.addEventListener("mouseout",h);function h(a){a.target.style.cursor=a.target.style.boxShadow=""};

================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html data-theme=dark>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width, initial-scale=1">
  <title>Dragon.js</title>
  <link href=http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic rel=stylesheet>
  <link href=http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic rel=stylesheet>
  <link href="http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic" rel=stylesheet type=text/css>
  <link href=css/basic.css rel=stylesheet>
  <link href=css/data-buttons.css rel=stylesheet>
  <style>
    aside {
      color: #652;
      font-family: "PT Serif", Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
      background: ivory;
      padding: 2em;
      margin: 2em auto;
      border: 1px solid tan;
      box-shadow: inset tan 0 0 100px, rgba(0,0,0,.15) 0 0 15px;
    }
    aside:after {
      content: '';
      display: block;
      clear: both;
    }
    img {
      pointer-events: all !important;
    }
    [data-button] {
      width: auto !important;
    }
    hr {
      margin: 2em auto;
      background: #aaa;
    }
  </style>
</head>
<body>
  <h1>Click to Drag</h1>
  <h2>dragging elements using mouse &amp; touchscreen</h2>
  <p>This is an experiment to see if dragging items on the page could be helpful for in-browser design. Simply click or tap on any element to move it and its children.</p>
  <p>If you'd like to test this on mobile, simple create a new bookmark for any page and replace the URL with 'javascript:' followed by the JavaScript in the following file: <a href=http://staticresource.com/dragon.js>http://staticresource.com/dragon.js</a></p>
  <p>Your Bookmark should look like this:</p>
  <p><strong>Name:</strong> Dragon<br><strong>URL:</strong> <code>javascript:var grab=startX=startY="",oldT…</code> (the rest of dragon.js here)</p>
  <p>Now load any site you want to rearrange, then tap on your bookmark and you should be able to tap and drag the elements around!</p>
  <hr>
  <aside>
    <img src=http://staticresource.com/user.png class=float-left>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </aside>
  <blockquote>
    <p><q>This is a blockquote</q></p>
    <footer>First Last</footer>
  </blockquote>
  <h2>List Test</h2>
  <ul>
    <li>list item
    <li>list item with <a href=#>a link</a>
    <li>list item
  </ul>
  <ol>
    <li>list item
    <li>list item with <a href=#>a link</a>
    <li>list item
  </ol>
  <h4>Button Test</h4>
  <input type=button data-button value="default button">
  <input type=button data-button="blue" value="blue button">
  <input type=button data-button="green" value="green button">
  <input type=button data-button="red" value="red button">
  <input type=button data-button="grey" value="grey button">
  <input type=button data-button="outline" value="outline button">
  <br>
  <input type=button data-button disabled value="default button">
  <input type=button data-button="blue" class="disabled" value="blue button">
  <input type=button data-button="green" hidden value="green button">
  <input type=button data-button="red" disabled value="red button">
  <input type=button data-button="grey" class="disabled" value="grey button">
  <input type=button data-button="outline" hidden value="outline button">
  <pre>&lt;script>alert('I LOVE ALERTS!')&lt;/script></pre>
  <h1>This is an &lt;H1&gt; Headline</h1>
  <hr>
  <h2>This is an &lt;H2&gt; Headline</h2>
  <h3>This is an &lt;H3&gt; Headline</h3>
  <h4>This is an &lt;H4&gt; Headline</h4>
  <h5>This is an &lt;H5&gt; Headline</h5>
  <h6>This is an &lt;H6&gt; Headline</h6>
  <p><img class=float-left style=width:100px src=http://staticresource.com/prestonIcon.jpg>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
  <p><img class=float-right style=width:100px src=http://staticresource.com/prestonIcon.jpg>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p><img class=float-none src=http://staticresource.com/prestonIcon.jpg></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <script>
    var grab=startX=startY=oldTop=oldLeft=0;
    document.addEventListener('click',function(e){e.preventDefault()},true);
    document.addEventListener('mousedown',pick);
    document.addEventListener('touchstart',pick);
    function pick(e){
      e.preventDefault();
      if (e.target!==document.documentElement && e.target!==document.body){
        grab=Date.now();
        e.target.setAttribute('data-drag',grab);
        e.target.style.position='relative';
        oldTop=e.target.style.top.split('px')[0]||0;
        oldLeft=e.target.style.left.split('px')[0]||0;
      }
      startX=e.clientX||e.touches[0].clientX;
      startY=e.clientY||e.touches[0].clientY;
    }
    document.addEventListener('mousemove',drag);
    document.addEventListener('touchmove',drag);
    function drag(e){
      if (grab!==''){
        var element=document.querySelector('[data-drag="'+grab+'"]');
        element.style.top=parseInt(oldTop)+parseInt((e.clientY||e.touches[0].clientY)-startY)+'px';
        element.style.left=parseInt(oldLeft)+parseInt((e.clientX||e.touches[0].clientX)-startX)+'px';
      }
    }
    document.addEventListener('mouseup',release);
    document.addEventListener('touchend',release);
    function release(e){
      grab='';
    }
    document.addEventListener('mouseover',over);
    function over(e){
      e.target.style.cursor='move'
      e.target.style.boxShadow='inset lime 0 0 1px, lime 0 0 1px'
    }
    document.addEventListener('mouseout',out);
    function out(e){
      e.target.style.cursor=e.target.style.boxShadow=''
    }
  </script>
</body>
</html>