DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

drag plugin

This commit is contained in:
kmdjs 2017-02-14 10:49:50 +08:00
parent d1a13c9b0b
commit 02f6fcfd13
6 changed files with 3792 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1807
example/hello/bundler.js Normal file
View File

File diff suppressed because it is too large Load Diff

1878
example/plugin/bundler.js Normal file
View File

File diff suppressed because it is too large Load Diff

14
example/plugin/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container"></div>
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../asset/github.png" alt="" />
</a>
<script src="bundler.js"></script>
</body>
</html>

34
example/plugin/main.js Normal file
View File

@ -0,0 +1,34 @@
import OmiDrag from './omi-drag.js';
OmiDrag.init();
class App extends Omi.Component {
constructor(data) {
super(data);
}
render() {
return `
<div>
<div omi-drag class="test">Drag Me<div>
</div>
`;
}
style(){
return `
.test{
width:100px;
height:100px;
color:white;
line-height:90px;
text-align:center;
background-color:#00BFF3;
}
`
}
}
Omi.render(new App(),"#container");

58
example/plugin/omi-drag.js Normal file
View File

@ -0,0 +1,58 @@
;(function () {
var OmiDrag = {};
var Omi = typeof require === 'function'
? require('../../src/index.js')
: window.Omi;
OmiDrag.init = function(){
Omi.extendPlugin('omi-drag',function(dom, instance){
dom.style.cursor='move';
var isMouseDown = false,
preX = preY = currentX = currentY = null,
translateX = 0,
translateY = 0;
dom.addEventListener('mousedown',function(evt){
isMouseDown = true;
preX = evt.pageX;
preY = evt.pageY;
evt.stopPropagation();
},false);
window.addEventListener('mousemove',function(evt){
if(isMouseDown){
currentX = evt.pageX;
currentY = evt.pageY;
if(preX != null){
translateX += currentX - preX;
translateY += currentY - preY;
dom.style.transform = 'translateX('+translateX+'px) translateY('+translateY+'px)';
}
preX = currentX;
preY = currentY;
evt.preventDefault();
}
},false);
window.addEventListener('mouseup',function(){
isMouseDown = false;
preX = preY = currentX = currentY = null;
},false);
});
}
OmiDrag.destroy = function(){
delete Omi.plugins['omi-drag'];
};
if (typeof exports == "object") {
module.exports = OmiDrag;
} else if (typeof define == "function" && define.amd) {
define([], function(){ return OmiDrag });
} else {
window.OmiDrag = OmiDrag;
}
})();

2
package.json
View File

@ -10,7 +10,7 @@
"curd": "webpack -w",
"hello": "webpack -w",
"loop": "webpack -w",
"finger": "webpack -w",
"plugin": "webpack -w",
"order": "webpack -w",
"timer": "webpack -w",
"communication": "webpack -w",