Created
December 16, 2013 22:25
-
-
Save kaecy/7995565 to your computer and use it in GitHub Desktop.
move and box sensor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head> | |
| <meta charset="ASCII"> | |
| <!-- load file-sequence --> | |
| <meta name="script" content="lib/move.es"> | |
| <meta name="script" content="lib/sensor.es"> | |
| <meta name="script" content="code/m.es"> | |
| <script src="lib/loades.es"></script> | |
| <style> | |
| .mover { | |
| cursor: -moz-grab; border: 1px dashed black; float: left; | |
| width: 102px; height: 102px; | |
| } | |
| .target { | |
| width: 200px; height: 200px; | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <center> | |
| <div class="target" id="target1" style="background: black; color: white"> | |
| Target</div> | |
| <div class="target" id="target2" style="background: black; color: white"> | |
| Target 2</div> | |
| </center> | |
| <div class="mover" id="box1" style="background: red">Shape</div> | |
| <div class="mover" id="box2" style="background: blue">Shape</div> | |
| <div class="mover" id="box3" style="background: green">Shape</div> | |
| <div class="mover" id="box4" style="background: yellow">Shape</div> | |
| <script> | |
| // load, load file-sequence | |
| load(); | |
| var a = 1; | |
| var elm; | |
| var target = getID("target1"); | |
| var target = getID("target2"); | |
| for (; a < 5; ++ a) { | |
| elm = getID("box" + a); | |
| elm.targets = []; | |
| elm.targets.push(target1); | |
| elm.targets.push(target2); | |
| addDrag(elm); | |
| addSensor(elm); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // move library | |
| // use "addDrag(elm);" elm needs to be an I think it's called HTMLElement. | |
| // That's it. That elm is now dragable. | |
| function moveListener(event) { | |
| var element = event.target; | |
| var moveListener; | |
| var releaseListener; | |
| var insideElmOffsetX; | |
| var insideElmOffsetY; | |
| insideElmOffsetX = Math.abs(element.offsetLeft - event.pageX); | |
| insideElmOffsetY = Math.abs(element.offsetTop - event.pageY); | |
| if (! element.moved) { | |
| element.moved = true; | |
| element.style.position = "absolute"; | |
| element.style.left = event.pageX - insideElmOffsetX; | |
| element.style.top = event.pageY - insideElmOffsetY; | |
| } | |
| element.style.zIndex = 1; | |
| element.style.cursor = "-moz-grabbing"; | |
| moveListener = function(event) { | |
| element.style.left = event.pageX - insideElmOffsetX; | |
| element.style.top = event.pageY - insideElmOffsetY; | |
| } | |
| var releaseListener = function() { | |
| element.style.zIndex = "auto"; | |
| element.style.cursor = "-moz-grab"; | |
| document.removeEventListener("mousemove", moveListener); | |
| document.removeEventListener("mouseup", releaseListener); | |
| } | |
| document.addEventListener("mousemove", moveListener); | |
| document.addEventListener("mouseup", releaseListener); | |
| } | |
| function addDrag(elm) { | |
| elm.addEventListener("mousedown", moveListener); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // sensor library | |
| // sensor needs more work | |
| function sensorListener(event) { | |
| var moveListener; | |
| var releaseListener; | |
| moveListener = function(event) { | |
| var scanData = scan(event.target); | |
| var a = 0; | |
| for (; a < event.target.targets.length; ++ a) { | |
| var targetScanData = scan(event.target.targets[a]); | |
| if ( | |
| scanData.top > targetScanData.top && | |
| scanData.left > targetScanData.left && | |
| scanData.bottom < targetScanData.bottom && | |
| scanData.right < targetScanData.right) { | |
| event.target.targets[a].style.background = | |
| event.target.style.background; | |
| } | |
| } | |
| }; | |
| releaseListener = function(event) { | |
| event.target.removeEventListener("mousemove", moveListener); | |
| } | |
| event.target.addEventListener("mousemove", moveListener); | |
| event.target.addEventListener("mouseup", releaseListener); | |
| } | |
| function addSensor(elm) { | |
| elm.addEventListener("mousedown", sensorListener); | |
| } | |
| function scan(elm) { | |
| return { | |
| top: elm.offsetTop, | |
| left: elm.offsetLeft, | |
| right: elm.offsetWidth + elm.offsetLeft, | |
| bottom: elm.offsetHeight + elm.offsetTop | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment