html中-css中 - 以ul 和 li标签双层结构为例
js中
1,定义一个init方法, 完成处理数据 并把最后选中的数据返回
1.通过getArr方法, 挂载了li元素的点击事件liClick方法, 并返回处理好的数据arr,checkbox的话arr里面是多条选中的,radio则为单条
通过array的特性来达到return返回的数据同步
2.根据传递过来的type类型判断是单选框还是复选框, 来调用不同的处理函数checkboxFun或radioFun
3.checkboxFun完成了复选框的一些数据处理操作 , , radioFun 完成了单选框的一些数据处理操作
2, 获取子元素集合, 并调用init函数,
init函数调用并会返回一个newArr, 这个newArr就是最新的数据集合
这样就可以实现一个单选多选的功能了
来源于：Web前端开发之@ 功能 JS 实现原理详解 http://www.javashuo.com/article/p-bcfyqyay-y.html
1.取以前保留先来的信息
2.删除 @ 符号
3.生成需要显示的内容，一个 span
4.将生成内容打包放在 Fragment 中
5.将 Fragment 中的内容放入 range 中，并将光标放在空格之后
6.成功选人后让输入框获取焦点
1.按下了@键，保存按下@时的光标信息
2.获取当前文本。 有@时，获取@参数，展示@列表；没有有@时，纯文本展示。
1.光标点击时，@列表不展示
2.按下键盘时触发，
1.按下enter键发送
2.按下@键保存变量为true，执行后续操作；
3.按下删除键，删除@xx整体
a ：因为在建立时默认会在 @xxx 后添加一个空格，
因此当得知光标位于 @xxx 以后的一个第一个字符后并按下删除按钮时，
应该将光标前的 @xxx 给删除
b ：当光标位于 @xxx 中间时，按下删除按钮时应该将整个 @xxx 给删除。
首先是三个事件，分别是 mousedown ， mousemove ， mouseup
当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行 mousemove 里面的具体方法。
clientX ， clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标，移动的举例应该是：
鼠标移动时候的坐标-鼠标按下去时候的坐标。
也就是说定位信息为：
鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.
还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top 等等值。
补充：也可以通过 html5 的拖放（Drag 和 drop）来实现
