<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
initial-scale
=
1
.0,
maximum-scale
=
1
.0,
user-scalable
=
no
">
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/metro/easyui.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/mobile.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/icon.css"
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.easyui.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.easyui.mobile.js"
>
</
script
>
</
head
>
<
body
>
<
h2
>
Drag Drop Tree Nodes using jQuery EasyUI Mobile
</
h2
>
<
div
class
=
"easyui-navpanel"
style
=
"padding:10px"
>
<
header
>
<
div
class
=
"m-toolbar"
>
<
div
class
=
"m-title"
>Drag/Drop Tree Nodes</
div
>
</
div
>
</
header
>
<
ul
class
=
"easyui-tree"
data-options
=
"animate:true,dnd:true"
>
<
li
>
<
span
>My Documents</
span
>
<
ul
>
<
li
data-options
=
"state:'closed'"
>
<
span
>Photos</
span
>
<
ul
>
<
li
>
<
span
>Official</
span
>
</
li
>
<
li
>
<
span
>Trips</
span
>
</
li
>
<
li
>
<
span
>FamilynFriends</
span
>
</
li
>
</
ul
>
<
span
>Files</
span
>
<
ul
>
<
li
><
span
>Personal</
span
></
li
>
<
li
><
span
>Official</
span
></
li
>
</
ul
>
</
li
>
<
li
>
<
span
>Program Files</
span
>
<
ul
>
<
li
>PHP</
li
>
<
li
>JavaScript</
li
>
<
li
>MySQL</
li
>
<
li
>Tutorials</
li
>
</
ul
>
</
li
>
<
li
>home.html</
li
>
<
li
>about.html</
li
>
<
li
>contact.html</
li
>
<
li
>welcome.html</
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>