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下边来回移动

Dart- move html element

Finally:

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

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

哈哈

秒客网

Dart- move html element

相关文章