File: demo_advanced.html

Recommend this page to a friend!
  Classes of Mark Rolich   Drag and Drop   demo_advanced.html   Download  
File: demo_advanced.html
Role: Auxiliary data
Content type: text/plain
Description: Advanced demo
Class: Drag and Drop
Handle drag and drop events of page elements
Author: By
Last change: Reverting back
Adding Event.js, htmlpreview not working with remote JS files in IE
First commit
Date: 2 years ago
Size: 2,428 bytes


Class file image Download
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" ""> <html> <head> <title>Dragdrop.js demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body class="advanced"> <div id="green" class="draggable">Green</div> <div id="blue" class="draggable">Blue</div> <div id="red" class="draggable">Red</div> <div id="orange" class="draggable">Orange</div> <div id="magenta" class="draggable">Magenta</div> <div id="yellow" class="draggable">Yellow</div> <div id="lightgreen" class="draggable">Light green</div> <textarea id="info"></textarea> <script type="text/javascript" src=""></script> <script type="text/javascript" src="Dragdrop.js"></script> <script> "use strict"; var evt = new Event(), dragdrop = new Dragdrop(evt), info = document.getElementById('info'), green = document.getElementById('green'), blue = document.getElementById('blue'), red = document.getElementById('red'), orange = document.getElementById('orange'), magenta = document.getElementById('magenta'), yellow = document.getElementById('yellow'), lightgreen = document.getElementById('lightgreen'), message = function (name, element) { var x = parseInt(, 10), y = parseInt(, 10); info.value += name + ': ' + + ' at position ' + x + ',' + y + "\r\n"; info.scrollTop = info.scrollHeight; }, start = function (element) {message('Started', element); }, move = function (element) {message('Moving', element); }, stop = function (element) {message('Stopped', element); }; dragdrop.set(green, {mode: 1, onstart: start, onmove: move, onstop: stop, snap: 72}); dragdrop.set(blue, {onstart: start, onmove: move, onstop: stop}); dragdrop.set(red, {onstart: start, onmove: move, onstop: stop}); dragdrop.set(orange, {onstart: start, onmove: move, onstop: stop}); dragdrop.set(magenta, {onstart: start, onmove: move, onstop: stop}); dragdrop.set(yellow, {onstart: start, onmove: move, onstop: stop, minX: 50, maxX: 350, minY: 50, maxY: 350}); dragdrop.set(lightgreen, {mode: 2, onstart: start, onmove: move, onstop: stop, snap: 18}); </script> </body> </html>