Dart- move html element

今天给出一个例程，像是个小游戏！哈哈

一 html

//anagram.html

<!DOCTYPE HTML>

<html>
<head>
<title>Anagram</title>
</head>
<body>
<h3>Pile:</h3>
<div id="letterpile"></div>

//anagramjs.html

<!DOCTYPE HTML>

<html>
<head>
<title>Anagram</title>
</head>
<body>
<h3>Pile:</h3>
<div id="letterpile"></div>

二 dart

//anagram.dart

import 'dart:html';
import 'dart:math' show Random;

List<String> alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n"];

List<ButtonElement> buttons = new List();
DivElement letterpile;
DivElement result;

void main() {
letterpile = querySelector('#letterpile');
result = querySelector('#result');
querySelector('#newl').onClick.listen(generateNewLetters);
}

void generateNewLetters(Event e) {
letterpile.children.clear();
result.children.clear();
Random indexGernerator = new Random();
buttons.clear();
for(var i=0; i<6; i++) {
int letterIndex = indexGernerator.nextInt(alphabet.length);
buttons.add(new ButtonElement());
buttons[i].classes.add("letter");
buttons[i].onClick.listen(moveLetter);
buttons[i].text = alphabet[letterIndex%14];
letterpile.children.add(buttons[i]);
}
}

void moveLetter(Event e) {
Element letter = e.target;
if (letter.parent==letterpile) {
result.children.add(letter);
} else {
letterpile.children.add(letter);
}
}

三 anagram.js

var isBrowser = typeof navigator == "object";

return {
getTag: getTag,
getUnknownTag: isBrowser ? getUnknownTagGenericBrowser : getUnknownTag,
prototypeForTag: prototypeForTag,
discriminator: discriminator };
}
C.i=function(hooks) { return hooks; }
C.p=function(hooks) {
if (typeof dartExperimentalFixupGetTag != "function") return hooks;
hooks.getTag = dartExperimentalFixupGetTag(hooks.getTag);
}
C.q=function(hooks) {
var getTag = hooks.getTag;
var prototypeForTag = hooks.prototypeForTag;
function getTagFixed(o) {
var tag = getTag(o);
if (tag == "Document") {
// "Document", so we check for the xmlVersion property, which is the empty
if (!!o.xmlVersion) return "!Document";
return "!HTMLDocument";
}
return tag;
}

function prototypeForTagFixed(tag) {
if (tag == "Document") return null; return prototypeForTag(tag);
}

hooks.getTag = getTagFixed;
hooks.prototypeForTag = prototypeForTagFixed;
}
C.r=function(hooks) {
var userAgent = typeof navigator == "object" ? navigator.userAgent : "";
if (userAgent.indexOf("Firefox") == -1) return hooks;

var getTag = hooks.getTag;

var quickMap = {
"BeforeUnloadEvent": "Event",
"DataTransfer": "Clipboard",
"GeoGeolocation": "Geolocation",
"Location": "!Location", "WorkerMessageEvent": "MessageEvent",
"XMLDocument": "!Document"};

function getTagFirefox(o) {
var tag = getTag(o);
return quickMap[tag] || tag;
}

hooks.getTag = getTagFirefox;
}
C.j=function getTagFallback(o) {
var s = Object.prototype.toString.call(o);
return s.substring(8, s.length - 1);
}
C.t=function(hooks) {
var userAgent = typeof navigator == "object" ? navigator.userAgent : "";
if (userAgent.indexOf("Trident/") == -1) return hooks;

var getTag = hooks.getTag;

var quickMap = {
"BeforeUnloadEvent": "Event",
"DataTransfer": "Clipboard",
"HTMLDDElement": "HTMLElement",
"HTMLDTElement": "HTMLElement",
"HTMLPhraseElement": "HTMLElement",
"Position": "Geoposition"
};

function getTagIE(o) {
var tag = getTag(o);
var newTag = quickMap[tag];
if (newTag) return newTag;
if (tag == "Object") {
if (window.DataView && (o instanceof window.DataView)) return "DataView";
}
return tag;
}

function prototypeForTagIE(tag) {
var constructor = window[tag];
if (constructor == null) return null;
return constructor.prototype;
}

hooks.getTag = getTagIE;
hooks.prototypeForTag = prototypeForTagIE;
}
C.u=function(getTagFallback) {
return function(hooks) {
if (typeof navigator != "object") return hooks;

var ua = navigator.userAgent;
if (ua.indexOf("DumpRenderTree") >= 0) return hooks;
if (ua.indexOf("Chrome") >= 0) {
function confirm(p) {
return typeof window == "object" && window[p] && window[p].name == p;
}
if (confirm("Window") && confirm("HTMLElement")) return hooks;
}

hooks.getTag = getTagFallback;
};
}
$.c4="$cachedFunction"
$.c5="$cachedInvocation"
$.G=0
$.a4=null
$.bI=null
$.bx=null
$.cC=null
$.cO=null
$.aY=null
$.b0=null
$.by=null
$.Y=null
$.af=null
$.ag=null
$.bs=!1
$.m=C.a
$.bO=0
$.az=null
$.bB=null
$=null
init.isHunkLoaded=function(a){return!!$dart_deferred_initializers$[a]}
init.deferredInitialized=new Object(null)
init.isHunkInitialized=function(a){return init.deferredInitialized[a]}
init.initializeLoadedHunk=function(a){$dart_deferred_initializers$[a]($globals$,$)
init.deferredInitialized[a]=true}
init.deferredLibraryUris={}
init.deferredLibraryHashes={};(function(a){for(var z=0;z<a.length;){var y=a[z++]
var x=a[z++]
var w=a[z++]
I.$lazy(y,x,w)}})(["bL","$get$bL",function(){return H.cJ("_$dart_dartClosure")},"b6","$get$b6",function(){return H.cJ("_$dart_js")},"bR","$get$bR",function(){return H.dy()},"bS","$get$bS",function(){if(typeof WeakMap=="function")var z=new WeakMap()
else{z=$.bO
$.bO=z+1
z="expando$key$"+z}return new P.dc(null,z)},"cc","$get$cc",function(){return H.H(H.aR({
toString:function(){return"$receiver$"}}))},"cd","$get$cd",function(){return H.H(H.aR({$method$:null,
toString:function(){return"$receiver$"}}))},"ce","$get$ce",function(){return H.H(H.aR(null))},"cf","$get$cf",function(){return H.H(function(){var $argumentsExpr$='$arguments$'
try{null.$method$($argumentsExpr$)}catch(z){return z.message}}())},"cj","$get$cj",function(){return H.H(H.aR(void 0))},"ck","$get$ck",function(){return H.H(function(){var $argumentsExpr$='$arguments$'
try{(void 0).$method$($argumentsExpr$)}catch(z){return z.message}}())},"ch","$get$ch",function(){return H.H(H.ci(null))},"cg","$get$cg",function(){return H.H(function(){try{null.$method$}catch(z){return z.message}}())},"cm","$get$cm",function(){return H.H(H.ci(void 0))},"cl","$get$cl",function(){return H.H(function(){try{(void 0).$method$}catch(z){return z.message}}())},"bk","$get$bk",function(){return P.ef()},"aH","$get$aH",function(){var z,y
z=P.aN
y=new P.W(0,P.ee(),null,[z])
y.bJ(null,z)
return y},"ai","$get$ai",function(){return[]},"bu","$get$bu",function(){return["a","b","c","d","e","f","g","h","i","j","k","l","m","n"]},"a0","$get$a0",function(){return[]}])
I=I.$finishIsolateConstructor(I)
$=new I()
init.metadata=[null]
init.types=[{func:1},{func:1,v:true},{func:1,args:[,]},{func:1,v:true,args:[{func:1,v:true}]},{func:1,v:true,args:[P.b],opt:[P.aw]},{func:1,ret:P.V,args:[P.j]},{func:1,v:true,args:[W.ao]},{func:1,args:[,P.V]},{func:1,args:[P.V]},{func:1,args:[{func:1,v:true}]},{func:1,args:[,],opt:[,]},{func:1,v:true,args:[,P.aw]},{func:1,args:[,,]},{func:1,v:true,args:[P.b]}]
function convertToFastObject(a){function MyClass(){}MyClass.prototype=a
new MyClass()
return a}function convertToSlowObject(a){a.__MAGIC_SLOW_PROPERTY=1
delete a.__MAGIC_SLOW_PROPERTY
return a}A=convertToFastObject(A)
B=convertToFastObject(B)
C=convertToFastObject(C)
D=convertToFastObject(D)
E=convertToFastObject(E)
F=convertToFastObject(F)
G=convertToFastObject(G)
H=convertToFastObject(H)
J=convertToFastObject(J)
K=convertToFastObject(K)
L=convertToFastObject(L)
M=convertToFastObject(M)
N=convertToFastObject(N)
O=convertToFastObject(O)
P=convertToFastObject(P)
Q=convertToFastObject(Q)
R=convertToFastObject(R)
S=convertToFastObject(S)
T=convertToFastObject(T)
U=convertToFastObject(U)
V=convertToFastObject(V)
W=convertToFastObject(W)
X=convertToFastObject(X)
Y=convertToFastObject(Y)
Z=convertToFastObject(Z)
function init(){I.p=Object.create(null)
init.allClasses=map()
init.getTypeFromName=function(a){return init.allClasses[a]}
init.interceptorsByTag=map()
init.leafTags=map()
init.finishedClasses=map()
I.$lazy=function(a,b,c,d,e){if(!init.lazies)init.lazies=Object.create(null)
init.lazies[a]=b
e=e||I.p
var z={}
var y={}
e[a]=z
e[b]=function(){var x=this[a]
if(x==y)H.fO(d||a)
try{if(x===z){this[a]=y
try{x=this[a]=c()}finally{if(x===z)this[a]=null}}return x}finally{this[b]=function(){return this[a]}}}}
I.$finishIsolateConstructor=function(a){var z=a.p
function Isolate(){var y=Object.keys(z)
for(var x=0;x<y.length;x++){var w=y[x]
this[w]=z[w]}var v=init.lazies
var u=v?Object.keys(v):[]
for(var x=0;x<u.length;x++)this[v[u[x]]]=null
function ForceEfficientMap(){}ForceEfficientMap.prototype=this
new ForceEfficientMap()
for(var x=0;x<u.length;x++){var t=v[u[x]]
this[t]=z[t]}}Isolate.prototype=a.prototype
Isolate.prototype.constructor=Isolate
Isolate.p=z
Isolate.u=a.u
return Isolate}}!function(){var z=function(a){var t={}
t[a]=1
return Object.keys(convertToFastObject(t))[0]}
init.getIsolateTag=function(a){return z("___dart_"+a+init.isolateTag)}
var y="___dart_isolate_tags_"
var x=Object[y]||(Object[y]=Object.create(null))
var w="_ZxYxX"
for(var v=0;;v++){var u=z(w+"_"+v+"_")
if(!(u in x)){x[u]=1
init.isolateTag=u
break}}init.dispatchPropertyName=init.getIsolateTag("dispatch_record")}();(function(a){if(typeof document==="undefined"){a(null)
return}if(typeof document.currentScript!='undefined'){a(document.currentScript)
return}var z=document.scripts
function onLoad(b){for(var x=0;x<z.length;++x)z[x].removeEventListener("load",onLoad,false)
a(b.target)}for(var y=0;y<z.length;++y)z[y].addEventListener("load",onLoad,false)})(function(a){init.currentScript=a
if(typeof dartMainRunner==="function")dartMainRunner(function(b){H.cQ(X.cD(),b)},[])
else (function(b){H.cQ(X.cD(),b)})([])})})()
//# sourceMappingURL=anagram.js.map

四演示

点击new letters按钮生成6个子界面

点击子界面，就在Pile和Word下边来回移动

Finally:

Dart引领我进入web世界，这是我以前想做但一直没做的事

感谢Dart lang，感谢Go lang，感谢党

哈哈

Dart- move html element的更多相关文章

Dart语法基础
hello world // Define a function. printNumber(num aNumber) { print('The number is $aNumber.'); // Pr ...
Flutter学习笔记（8）--Dart面向对象
如需转载,请注明出处:Flutter学习笔记(7)--Dart异常处理 Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多 ...
Dart自定义库、系统库和第三方库
/* 前面介绍Dart基础知识的时候基本上都是在一个文件里面编写Dart代码的,但实际开发中不可能这么写,模块化很重要,所以这就需要使用到库的概念. 在Dart中,库的使用时通过import关键字引入 ...
Dart 语言简述
Dart是一种“结构化的web编程”语言,Dart编程语言在所有现代浏览器和环境中提供高性能.Dart是谷歌开发的计算机编程语言,后来被ECMA认定为标准. Dart重要的概念: 1.所有的东西都是对 ...
Flutter的原理及美团的实践
导读 Flutter是Google开发的一套全新的跨平台.开源UI框架,支持iOS.Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件.自从2017年5月发布第一个版本以来,目前 ...
flutter兼论
Flutter是Google开发的一套全新的跨平台.开源UI框架,支持iOS.Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件.自从2017年5月发布第一个版本以来,目前Fl ...
[AngularJS] AngularJS系列(5) 中级篇之动画
目录 CSS定义 JS定义 ng动画实际帮我们在状态切换的时候添加特定的样式从而实现动画效果. 一般我们会通过C3来实现具体的动画. CSS定义 ng-if 图(实际上,图并不能展现出什么): H ...
Sequential List
Sequential ListSequential list storage structure:#define LIST_INIT_SIZE 20 #define LIST_INCREASE 10t ...
angularjs学习总结详细教程（转载）
1 前言前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
AngularJs $animate 让页面动起来
$animate $animate服务提供了基本的DOM操作功能如在DOM里插入.移除和移动元素,以及添加和删除类.这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的 ...

随机推荐

CentOS7 vsftpd 安装及配置
0x:卸载vsftpd [root@localhost ~]# yum remove vsftpd [root@localhost ~]# find / -name "vsftpd*&quo ...
试水Spring Cloud Hystrix
Spring Cloud Hystrix是一个容错库,它实现了断路器模式,使得当服务发生异常时,会自动切断连接,并将请求引导至预设的回调方法. 服务端在Spring Tool Suite的文件菜单中 ...
python基础①
一. Python 命名规范: 1, 变量量由字⺟母, 数字,下划线搭配组合⽽而成 2, 不不可以⽤用数字开头,更更不不能是全数字 3,不能是pythond的关键字, 这些符号和字⺟母已经 ...
[No0000DC]C# FileHelper 本地文件、文件夹操作类封装FileHelper
using System; using System.Diagnostics; using System.IO; using System.Text; using Shared; namespace ...
为什么实数系里不存在最小正数？(Why the smallest positive real number doesn't exist in the real number system ?)
We define the smallest positive real number as the number which is explicitly greater than zero and ...
IP地址、MAC地址及端口
概述: IP 是地址,有定位功能(网与网的通讯) (在逻辑上唯一标识一台电脑)(网络层) MAC 是身份证,无定位功能(在子网干活)(在物理上唯一标识一台电脑) (链路层) 首先是如何查看ip ...
take a cpu core offline
[root@vrouter1 ~]# cat /sys/devices/system/cpu/online -,,- [root@vrouter1 ~]# cat /sys/devices/syste ...
[daily][gnucash] 复式记账
管理, 是成就人生的第一步. 管钱,是第一步中的第一小步. 选了又选,终于选了一个软件,gnucash, 但是, 他有点专业, 用之前需要搞懂一下会计概念. 即: 复式记账 gnucash手册的这一章 ...
Java8 in action
解决的问题: behavior parameterization,即可以把一段code,逻辑作为参数传入: 这样做的目的,当然为了代码抽象和重用,把变化的逻辑抽象出去: 在java中,如果要实现beh ...
树和二叉树->其他(待完善)
关于树和二叉树的部分,还有如下三个知识点,待以后时间更充裕的时候再回头完善. 1 树与等价问题文字描述关于等价关系和等价类的定义,在离散数学上的描述有点拗口, 其实在数据结构中,这部分相关的主要是 ...

Dart- move html element

Dart- move html element的更多相关文章

随机推荐

热门专题