├── Ruby.jpg ├── .gitignore ├── gulpfile.js ├── demo.min.js ├── package.json ├── LICENSE ├── demo.js ├── bs-config.js ├── dist └── drag.min.js ├── README.md ├── style.css ├── index.html ├── src └── drag.js └── blyde.min.js /Ruby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/Drag.js/master/Ruby.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Generated files 2 | bin/ 3 | gen/ 4 | 5 | # Log Files 6 | *.log 7 | *.log.* 8 | 9 | # Temp Files 10 | *~ 11 | *.*~ 12 | .fuse_* 13 | cache/ 14 | 15 | # Project files 16 | 17 | # node modules 18 | node_modules/ -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const rename = require('gulp-rename'); 3 | const babel = require('gulp-babel'); 4 | const uglify = require('gulp-uglify'); 5 | 6 | gulp.task('default', () => { 7 | gulp.src('src/drag.js') 8 | .pipe(babel({ 9 | presets: ['es2015'] 10 | })) 11 | .pipe(uglify()) 12 | .pipe(rename({ 13 | suffix: '.min' 14 | })) 15 | .pipe(gulp.dest('dist')); 16 | gulp.src('demo.js') 17 | .pipe(babel({ 18 | presets: ['es2015'] 19 | })) 20 | .pipe(uglify()) 21 | .pipe(rename({ 22 | suffix: '.min' 23 | })) 24 | .pipe(gulp.dest('./')); 25 | return; 26 | }); -------------------------------------------------------------------------------- /demo.min.js: -------------------------------------------------------------------------------- 1 | "use strict";$(function(){for(var t=null,n=$qa(".listContainer>*"),r=$qa(".listContainer"),o=$qa(".item"),e=function(r){var o=n[r];o.draggable=!0;var e=function(n){if(n.preventDefault(),!t){var r=window.getComputedStyle(o);o.startDrag(r.width),t=o,o.dragHolder.style.height=r.height;var e=function a(){window.un("mouseup",a),t=null;var n=o.dragHolder.getBoundingClientRect();o.moveTo(n.left,n.top,function(){return o.stopDrag()})};o.dragCase.dragger.release=e,window.on("mouseup",e)}};o.on("dragstart",e),o.on("touchstart",e)},a=0;a { 4 | let draggingItem = null; 5 | let allItems = $qa('.listContainer>*'); 6 | let containers = $qa('.listContainer'); 7 | let dynItems = $qa('.item'); 8 | for (let i = 0; i < allItems.length; i++) { 9 | let _this = allItems[i]; 10 | _this.draggable = true; 11 | let start = (e) => { 12 | e.preventDefault(); 13 | if (draggingItem) return; 14 | let computedStyle = window.getComputedStyle(_this); 15 | _this.startDrag(computedStyle.width); 16 | draggingItem = _this; 17 | _this.dragHolder.style.height = computedStyle.height; 18 | let release = () => { 19 | window.un('mouseup', release); 20 | draggingItem = null; 21 | let clientStyle = _this.dragHolder.getBoundingClientRect(); 22 | _this.moveTo(clientStyle.left, clientStyle.top, () => _this.stopDrag()); 23 | }; 24 | _this.dragCase.dragger.release = release; 25 | window.on('mouseup', release); 26 | }; 27 | _this.on('dragstart', start); 28 | _this.on('touchstart', start); 29 | } 30 | for (let i = 0; i < containers.length; i++) { 31 | let _this = containers[i]; 32 | let drop = (e) => { 33 | if (!draggingItem) return; 34 | e.stopPropagation(); 35 | _this.append(draggingItem.dragHolder); 36 | _this.scrollTop = _this.scrollHeight; 37 | draggingItem.dragCase.dragger.release(); 38 | }; 39 | _this.on('touchend', drop); 40 | _this.on('mouseup', drop); 41 | } 42 | for (let i = 0; i < dynItems.length; i++) { 43 | let _this = dynItems[i]; 44 | dynItems[i].on('click', () => { 45 | _this.startDrag(); 46 | }); 47 | } 48 | $q('#restoreItemBtn').on('click', () => { 49 | for (let i = 0; i < dynItems.length; i++) { 50 | dynItems[i].stopDrag(); 51 | } 52 | }); 53 | }); -------------------------------------------------------------------------------- /bs-config.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | |-------------------------------------------------------------------------- 4 | | Browser-sync config file 5 | |-------------------------------------------------------------------------- 6 | | 7 | | For up-to-date information about the options: 8 | | http://www.browsersync.io/docs/options/ 9 | | 10 | | There are more options than you see here, these are just the ones that are 11 | | set internally. See the website for more info. 12 | | 13 | | 14 | */ 15 | module.exports = { 16 | "ui": { 17 | "port": 3001, 18 | "weinre": { 19 | "port": 8080 20 | } 21 | }, 22 | "files": "*.html, *.js, src/*.js, *.css", 23 | "watchOptions": {}, 24 | "server": true, 25 | "proxy": false, 26 | "port": 3000, 27 | "middleware": false, 28 | "serveStatic": [], 29 | "ghostMode": { 30 | "clicks": true, 31 | "scroll": true, 32 | "forms": { 33 | "submit": true, 34 | "inputs": true, 35 | "toggles": true 36 | } 37 | }, 38 | "logLevel": "info", 39 | "logPrefix": "BS", 40 | "logConnections": false, 41 | "logFileChanges": true, 42 | "logSnippet": true, 43 | "rewriteRules": false, 44 | "open": "local", 45 | "browser": "default", 46 | "xip": false, 47 | "hostnameSuffix": false, 48 | "reloadOnRestart": false, 49 | "notify": true, 50 | "scrollProportionally": true, 51 | "scrollThrottle": 0, 52 | "scrollRestoreTechnique": "window.name", 53 | "scrollElements": [], 54 | "scrollElementMapping": [], 55 | "reloadDelay": 0, 56 | "reloadDebounce": 0, 57 | "plugins": [], 58 | "injectChanges": true, 59 | "startPath": null, 60 | "minify": true, 61 | "host": null, 62 | "codeSync": true, 63 | "timestamps": true, 64 | "clientEvents": [ 65 | "scroll", 66 | "scroll:element", 67 | "input:text", 68 | "input:toggles", 69 | "form:submit", 70 | "form:reset", 71 | "click" 72 | ], 73 | "socket": { 74 | "socketIoOptions": { 75 | "log": false 76 | }, 77 | "socketIoClientConfig": { 78 | "reconnectionAttempts": 50 79 | }, 80 | "path": "/browser-sync/socket.io", 81 | "clientPath": "/browser-sync", 82 | "namespace": "/browser-sync", 83 | "clients": { 84 | "heartbeatTimeout": 5000 85 | } 86 | }, 87 | "tagNames": { 88 | "less": "link", 89 | "scss": "link", 90 | "css": "link", 91 | "jpg": "img", 92 | "jpeg": "img", 93 | "png": "img", 94 | "svg": "img", 95 | "gif": "img", 96 | "js": "script" 97 | } 98 | }; -------------------------------------------------------------------------------- /dist/drag.min.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(){var t=0,e=0;window.on("mousemove",function(a){t=a.clientX,e=a.clientY}),window.on("touchmove",function(a){t=a.touches[0].clientX,e=a.touches[0].clientY}),window.on("touchstart",function(a){t=a.touches[0].clientX,e=a.touches[0].clientY});var a=function(t){var e=$create("dragcase"),a=$create("dragHolder"),r=t.getBoundingClientRect(),s=window.getComputedStyle(t);return e.dragger={posX:r.left,posY:r.top,deg:0},e.style.position="fixed",e.style.display="block",e.style.left=e.dragger.posX+"px",e.style.top=e.dragger.posY+"px",a.style.display=s.display,a.style["float"]=s["float"],e.append(a),t.dragCase=e,t.dragHolder=a,e},r=function s(){var a=0,r=0;if(this.dragging)a=t-this.clientWidth/2-this.dragger.posX,r=e-this.dragger.posY+40;else if(a=this.dragger.targetX-this.dragger.posX,r=this.dragger.targetY-this.dragger.posY,Math.pow(a,2)+Math.pow(r,2)<.05)return this.style.left=this.dragger.targetX+"px",this.style.top=this.dragger.targetY+"px",this.style.transform="rotate(0deg)",window.cancelAnimationFrame(this.dragID),this.dragger.dragID=null,void(this.dragger.callback&&this.dragger.callback());var g=Math.tan(a/(Math.abs(this.dragger.posY-e)+2*Math.sqrt(Math.pow(this.clientHeight,2)+Math.pow(this.clientWidth,2))+100+Math.abs(a)))/Math.PI*180;g>60?g=60:-60>g&&(g=-60),g-=this.dragger.deg,this.dragger.posX=this.dragger.posX+a/8,this.dragger.posY=this.dragger.posY+r/8,this.dragger.deg=this.dragger.deg+g/8,this.style.left=this.dragger.posX+"px",this.style.top=this.dragger.posY+"px",this.style.transform="rotate("+this.dragger.deg+"deg)",this.dragger.dragID=window.requestAnimationFrame(s.bind(this))};Blyde.fn("Dragjs",{node:{startDrag:function(t,e){if(this.parentNode.dragging||"DRAGCASE"===this.tagName.toUpperCase())return this;var s="";return"DRAGCASE"===this.parentNode.tagName.toUpperCase()?s=this.parentNode:(s=a(this),t&&(s.style.width=t),e&&(s.style.height=e),this.swap(this.dragHolder)),$q("body").appendChild(s),s.dragging=!0,s.dragger.dragID||r.call(s),this},dragRelease:function(a){return"DRAGCASE"===this.tagName.toUpperCase()?this:("DRAGCASE"===this.parentNode.tagName.toUpperCase()&&this.parentNode.dragging===!0&&(this.dragCase.dragger.callback=a,this.dragCase.dragger.targetX=t-this.dragCase.clientWidth/2,this.dragCase.dragger.targetY=e,this.dragCase.dragging=!1),this)},stopDrag:function(t){return"DRAGCASE"===this.tagName.toUpperCase()?this:(this.dragCase&&(this.dragCase.dragger.dragID&&window.cancelAnimationFrame(this.dragCase.dragger.dragID),t?t():this.dragHolder.swap(this),this.dragHolder.remove(),this.dragCase.remove(),this.dragHolder=null,this.dragCase=null),this)},moveTo:function(t,e,a){return"DRAGCASE"===this.tagName.toUpperCase()?this:(this.startDrag().dragRelease(a),this.dragCase.dragger.targetX=t,this.dragCase.dragger.targetY=e,this)}}},!0)}(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Drag.js 2 | ======== 3 | 4 | [Demo](https://classicoldsong.github.io/Drag.js) 5 | 6 | A really cute dragger addone for [Blyde](https://github.com/ClassicOldSong/Blyde), inspired by the dragging effect of [FL Studio](https://www.image-line.com/flstudio/) 7 | 8 | Smooth even on MTK devices 9 | 10 | ![demo](https://cloud.githubusercontent.com/assets/10512422/15921544/be5a1ad0-2e54-11e6-93fb-94c129c043cc.gif) 11 | 12 | --- 13 | 14 | Notice 15 | ------------ 16 | 17 | *Blyde* ***DOES NOT*** *compatible with jQuery!!* 18 | 19 | Maybe Drag.js is a little bit difficult to use, but it worth it! 20 | 21 | Installation 22 | ------------ 23 | 24 | git clone https://github.com/classicoldsong/Drag.js.git 25 | 26 | or 27 | 28 | npm install drag-js 29 | 30 | Usage 31 | ------------ 32 | 33 | First you need to include these scripts before document is loaded: 34 | 35 | ~~~ javascript 36 | 37 | 38 | ~~~ 39 | 40 | Then you can drag *ANY* element on your page using `element.stargDrag()`! 41 | 42 | API 43 | ------------ 44 | 45 | + `element.startDrag(width, height)`: Start drag this element with specified width and height in string such as `element.startDrag('124px', '50px')`. You can also stard drag directly without these parameters. 46 | + `element.dragRelease(callback)`: Release the drag with or without callback and the animation will continue until the element moves to it's target coordinate. Callback will be fired as soon as the animation finishes. 47 | + `element.stopDrag(callback)`: Stops dragging immediately, if without callback the element will be returned to it's original place. Callback will be fired before the dragHolder and dragCase being removed from the document. 48 | + `element.moveTo(x, y, callback)`: Move the element to a specified coordinate with animation. If callback exists, it will be fired as soon as the animation finishes, and the `element.stopDrag()` is **NOT** automatically excuted. 49 | 50 | After `element.startDrag()`, you can get these: 51 | 52 | + `element.dragCase`: The container of the element when dragging. 53 | + `element.dragHolder`: The placeholder for the original element. 54 | + `element.dragCase.dragger.posX`: Current X coordinate. 55 | + `element.dragCase.dragger.posY`: Current Y coordinate. 56 | + `element.dragCase.dragger.deg`: Current rotation degree. 57 | 58 | After `element.dragRelease()` you can get these: 59 | 60 | + `element.dragCase.dragger.targetX`: The destination X coordinate, by default it is the X position where your mouse is when `element.dragRelease()` is excuted. 61 | + `element.dragCase.dragger.targetY`: The destination Y coordinate, by default it is the Y position where your mouse is when `element.dragRelease()` is excuted. 62 | 63 | You can set the target position manually after `element.dragRelease()` is excuted, but obviously using `element.moveTo(x, y)` is a better idea. 64 | 65 | Not understanding? 66 | ------------ 67 | 68 | Don't worry, just read the source code of `demo.js` to look for some inspiration. You can make it! 69 | 70 | License 71 | ------------ 72 | [MIT](https://cos.mit-license.org/), © [ClassicOldSong](https://github.com/ClassicOldSong) 73 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | html { 5 | -webkit-touch-callout: none; 6 | -webkit-user-select: none; 7 | -khtml-user-select: none; 8 | -moz-user-select: none; 9 | -ms-user-select: none; 10 | user-select: none; 11 | font-family: Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", STXihei, STHeiti, Heiti, SimSun, sans-serif; 12 | } 13 | body { 14 | margin: 0; 15 | padding: 0; 16 | background-color: #ECECEC; 17 | } 18 | h1 { 19 | font-size: 3em; 20 | margin: 20px 0; 21 | } 22 | 23 | ::-webkit-scrollbar-track-piece{} 24 | ::-webkit-scrollbar{width: 0;} 25 | ::-webkit-scrollbar-thumb{background: rgba(0, 0, 0, 0);} 26 | ::-webkit-scrollbar-thumb:hover {background: rgba(0, 0, 0, 0.3);} 27 | 28 | .contentFrame { 29 | position: relative; 30 | padding: 40px 40px; 31 | width: 100%; 32 | max-width: 900px; 33 | margin: 0 auto; 34 | background-color: #FFF; 35 | box-shadow: 0 0 30px rgba(0, 0, 0, 0.30); 36 | } 37 | a { 38 | text-decoration: none; 39 | color:#666; 40 | cursor: pointer; 41 | } 42 | a:hover { 43 | color:#999; 44 | } 45 | p { 46 | padding-left: 15px; 47 | line-height: 26px; 48 | } 49 | .sub { 50 | border-left: 5px solid #F06292; 51 | padding-left: 10px; 52 | line-height: 20px; 53 | font-size: 20px; 54 | } 55 | .links { 56 | bottom: 0; 57 | left: 0; 58 | width: 100%; 59 | padding: 10px 0; 60 | background-color: #FFF; 61 | font-size: 0.75em; 62 | text-align: center; 63 | } 64 | .section { 65 | margin: 20px 0; 66 | overflow: hidden; 67 | } 68 | .center { 69 | display: flex; 70 | flex-direction: row; 71 | flex-wrap: wrap; 72 | justify-content: center; 73 | align-items: center; 74 | width: 100%; 75 | margin: 0 auto; 76 | overflow: hidden; 77 | } 78 | .centerItem { 79 | flex-grow: 0; 80 | flex-shrink: 1; 81 | margin: 10px 10px; 82 | border: 1px solid #DEDEDE; 83 | border-radius: 3px; 84 | } 85 | .listContainer { 86 | height: 202px; 87 | width: 240px; 88 | overflow-y: auto; 89 | } 90 | .listItem { 91 | width: 100%; 92 | cursor: move; 93 | background-color: #FFF; 94 | border-bottom: 1px solid #DEDEDE; 95 | border-left: 5px solid #DEDEDE; 96 | padding-left: 15px; 97 | height: 40px; 98 | line-height: 40px; 99 | background-color: #F8F8F8; 100 | overflow: hidden; 101 | white-space: nowrap; 102 | text-overflow: ellipsis; 103 | transition: border-left .3s; 104 | } 105 | .listItem:hover { 106 | border-left: 10px solid #DEDEDE; 107 | } 108 | dragcase>.listItem { 109 | border-bottom: 0; 110 | } 111 | 112 | .item { 113 | cursor: move; 114 | text-align: center; 115 | background-color: #F8F8F8; 116 | } 117 | .item.huge { 118 | height: 200px; 119 | width: 200px; 120 | line-height: 198px; 121 | } 122 | .item.big { 123 | height: 150px; 124 | width: 150px; 125 | line-height: 148px; 126 | } 127 | .item.small { 128 | height: 100px; 129 | width: 100px; 130 | line-height: 98px; 131 | } 132 | .item.tiny { 133 | height: 50px; 134 | width: 50px; 135 | line-height: 48px; 136 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drag.js 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Drag.js

18 |

A really cute dragger addone for Blyde

19 |
20 |
21 |
22 |

A very common usage

23 |

Drag items between containers

24 |
25 |
26 |
Item 1
27 |
Item 2
28 |
Item 3
29 |
Item 4
30 |
31 |
32 |
Drop items here
33 |
Just more items
34 |
Lalala
35 |
36 |
37 |
Also drop here
38 |
Drag me!
39 |
40 |
41 |

*On mobile devices you may need to click on the target to drop the item

42 |
43 |
44 |

Something about weight... Yeah that's weight

45 |

Bigger items might not be that dynamic (slightly different)

46 |

Click on elements below in order and drag them to see the tiny difference

47 |
48 |
HUGE
49 |
Big
50 |
small
51 |
tiny
52 |
53 |

Click here to restore

54 |
55 |
56 |

Want something more?

57 |

Open the console, select any element on this page and use "element.startDrag()" to drag it, if you would like to, you can set the size of the dragger like "element.startDrag('124px', '50px')". Use "element.dragRelease()" to release the drag, "element.stopDrag()" to stop dragging and return to the original place immediately or "element.moveTo(x,y)" to move the elemet to a specific coordinate.

58 |

Try it out yourself to see what's happening.

59 |
60 | Ruby Rose 61 |
62 |
63 |
64 |

License

65 |

MIT, © ClassicOldSong

66 |
67 |
68 |
69 | View on GitHub | Visit NZone! | Visit my blog 70 |
71 |
72 |
73 | 74 | -------------------------------------------------------------------------------- /src/drag.js: -------------------------------------------------------------------------------- 1 | /* global $q, $create, Blyde */ 2 | "use strict"; 3 | { 4 | let mouseX = 0, mouseY = 0; 5 | window.on('mousemove', (e) => { 6 | mouseX = e.clientX; 7 | mouseY = e.clientY; 8 | }); 9 | window.on('touchmove', (e) => { 10 | mouseX = e.touches[0].clientX; 11 | mouseY = e.touches[0].clientY; 12 | }); 13 | window.on('touchstart', (e) => { 14 | mouseX = e.touches[0].clientX; 15 | mouseY = e.touches[0].clientY; 16 | }); 17 | 18 | const createCase = (node) => { 19 | let dragCase = $create('dragcase'); 20 | let dragHolder = $create('dragHolder'); 21 | let clientStyle = node.getBoundingClientRect(); 22 | let computedStyle = window.getComputedStyle(node); 23 | dragCase.dragger = { 24 | posX: clientStyle.left, 25 | posY: clientStyle.top, 26 | deg: 0 27 | }; 28 | dragCase.style.position = 'fixed'; 29 | dragCase.style.display = 'block'; 30 | dragCase.style.left = dragCase.dragger.posX + 'px'; 31 | dragCase.style.top = dragCase.dragger.posY + 'px'; 32 | dragHolder.style.display = computedStyle.display; 33 | dragHolder.style.float = computedStyle.float; 34 | dragCase.append(dragHolder); 35 | node.dragCase = dragCase; 36 | node.dragHolder = dragHolder; 37 | return dragCase; 38 | }; 39 | 40 | const drag = function() { 41 | let diffX = 0, diffY = 0; 42 | 43 | if (this.dragging) { 44 | diffX = mouseX - this.clientWidth/2 - this.dragger.posX; 45 | diffY = mouseY - this.dragger.posY + 40; 46 | } else { 47 | diffX = this.dragger.targetX - this.dragger.posX; 48 | diffY = this.dragger.targetY - this.dragger.posY; 49 | if ((Math.pow(diffX, 2) + Math.pow(diffY, 2)) < 0.05) { 50 | this.style.left = this.dragger.targetX + 'px'; 51 | this.style.top = this.dragger.targetY + 'px'; 52 | this.style.transform = `rotate(0deg)`; 53 | window.cancelAnimationFrame(this.dragID); 54 | this.dragger.dragID = null; 55 | if (this.dragger.callback) this.dragger.callback(); 56 | return; 57 | } 58 | } 59 | 60 | let diffDeg = Math.tan(diffX/(Math.abs(this.dragger.posY - mouseY) + Math.sqrt(Math.pow(this.clientHeight, 2) + Math.pow(this.clientWidth, 2))*2 + 100 + Math.abs(diffX)))/Math.PI*180; 61 | if (diffDeg > 60) { 62 | diffDeg = 60; 63 | } else if (diffDeg < -60) { 64 | diffDeg = -60; 65 | } 66 | diffDeg = diffDeg - this.dragger.deg; 67 | this.dragger.posX = this.dragger.posX + diffX/8; 68 | this.dragger.posY = this.dragger.posY + diffY/8; 69 | this.dragger.deg = this.dragger.deg + diffDeg/8; 70 | this.style.left = this.dragger.posX + 'px'; 71 | this.style.top = this.dragger.posY + 'px'; 72 | this.style.transform = `rotate(${this.dragger.deg}deg)`; 73 | 74 | this.dragger.dragID = window.requestAnimationFrame(drag.bind(this)); 75 | }; 76 | 77 | Blyde.fn('Dragjs', { 78 | node: { 79 | startDrag(width, height) { 80 | if (this.parentNode.dragging || this.tagName.toUpperCase() === 'DRAGCASE') return this; 81 | let dragCase = ''; 82 | if (this.parentNode.tagName.toUpperCase() === 'DRAGCASE') { 83 | dragCase = this.parentNode; 84 | } else { 85 | dragCase = createCase(this); 86 | if (width) dragCase.style.width = width; 87 | if (height) dragCase.style.height = height; 88 | this.swap(this.dragHolder); 89 | } 90 | $q('body').appendChild(dragCase); 91 | dragCase.dragging = true; 92 | if (!dragCase.dragger.dragID) { 93 | drag.call(dragCase); 94 | } 95 | return this; 96 | }, 97 | dragRelease(cb) { 98 | if (this.tagName.toUpperCase() === 'DRAGCASE') return this; 99 | if (this.parentNode.tagName.toUpperCase() === 'DRAGCASE' && this.parentNode.dragging === true) { 100 | this.dragCase.dragger.callback = cb; 101 | this.dragCase.dragger.targetX = mouseX - this.dragCase.clientWidth/2; 102 | this.dragCase.dragger.targetY = mouseY; 103 | this.dragCase.dragging = false; 104 | } 105 | return this; 106 | }, 107 | stopDrag(cb) { 108 | if (this.tagName.toUpperCase() === 'DRAGCASE') return this; 109 | if (this.dragCase) { 110 | if (this.dragCase.dragger.dragID) { 111 | window.cancelAnimationFrame(this.dragCase.dragger.dragID); 112 | } 113 | if (cb) { 114 | cb(); 115 | } else { 116 | this.dragHolder.swap(this); 117 | } 118 | this.dragHolder.remove(); 119 | this.dragCase.remove(); 120 | this.dragHolder = null; 121 | this.dragCase = null; 122 | } 123 | return this; 124 | }, 125 | moveTo(x, y, cb) { 126 | if (this.tagName.toUpperCase() === 'DRAGCASE') return this; 127 | this.startDrag().dragRelease(cb); 128 | this.dragCase.dragger.targetX = x; 129 | this.dragCase.dragger.targetY = y; 130 | return this; 131 | } 132 | } 133 | }, true); 134 | } -------------------------------------------------------------------------------- /blyde.min.js: -------------------------------------------------------------------------------- 1 | "use strict";function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);tr;r++)n[r]=arguments[r];return(e=console).error.apply(e,["[Blyde]"].concat(n))},n=document.createDocumentFragment(),r={$q:function(e){return this.querySelector(e)},$qa:function(e){return this.querySelectorAll(e)},addClass:function(e){var t,n=e.split(" ");return(t=this.classList).add.apply(t,_toConsumableArray(n)),this},removeClass:function(e){var t,n=e.split(" ");return(t=this.classList).remove.apply(t,_toConsumableArray(n)),this},toggleClass:function(e){var t=e.split(" "),n=this.className.split(" ");for(var r in t){var i=n.indexOf(t[r]);i>-1?n.splice(i,1):n.push(t[r])}return this.className=n.join(" ").trim(),this},replaceWith:function(e){var t=this.parentNode;return t?(t.replaceChild(e,this),e):this},swap:function(e){var n=this.parentNode,r=e.parentNode,i=this.nextSibling,o=e.nextSibling;if(n&&r)return n.insertBefore(e,i),r.insertBefore(this,o),e;var a=[];return null===n&&a.push(this),null===r&&a.push(e),t.apply(void 0,a.concat(["may not have been attached to document properly."])),this},before:function(){if(this.parentNode){for(var e=document.createDocumentFragment(),t=arguments.length,n=Array(t),r=0;t>r;r++)n[r]=arguments[r];n.reverse();for(var i in n)e.appendChild(n[i]);this.parentNode.insertBefore(e,this)}return this},after:function(){if(this.parentNode){for(var e=document.createDocumentFragment(),t=arguments.length,n=Array(t),r=0;t>r;r++)n[r]=arguments[r];for(var i in n)e.appendChild(n[i]);this.nextSibling?this.parentNode.insertBefore(e,this.nextSibling):this.parentNode.append(e)}return this},append:function(){for(var e=document.createDocumentFragment(),t=arguments.length,n=Array(t),r=0;t>r;r++)n[r]=arguments[r];for(var i in n)e.appendChild(n[i]);return this.appendChild(e),this},prepend:function(){for(var e=document.createDocumentFragment(),t=arguments.length,n=Array(t),r=0;t>r;r++)n[r]=arguments[r];n.reverse();for(var i in n)e.appendChild(n[i]);return this.firstChild?this.insertBefore(e,this.firstChild):this.appendChild(e),this},appendTo:function(e){return e.appendChild(this),this},prependTo:function(e){return e.firstChild?e.insertBefore(this,e.firstChild):e.appendChild(this),this},empty:function(){this.innerHTML=""},remove:function(){return this.parentNode.removeChild(this),this},safeRemove:function(){return n.appendChild(this),this},on:function(e,t,n){"function"==typeof t&&this.addEventListener(e,t,!!n)},un:function(e,t,n){"function"==typeof t&&this.removeEventListener(e,t,!!n)}},i={addClass:function(e){for(var t=e.split(" "),n=0;nn;n++)t[n]=arguments[n];return Velocity.apply(void 0,[this].concat(t)),this}},list:{velocity:function(){for(var e=arguments.length,t=Array(e),n=0;e>n;n++)t[n]=arguments[n];for(var r=0;r