开发工具可参考博客置顶贴
实现思路:
- HTML5+CSS结构
- 添加draggable属性实现API互动
- JS获取HTML节点
- JS添加拖拽事件(如:ondragstart、ondragover、ondrop)
首先展示的是HTML5和CSS的结构:
<head>
<meta charset="UTF-8">
<title></title>
<style>/*css*/
*{margin: 0;padding: 0;}
ul li{list-style: none;}
.list{width: 880px;height: 300px;border: 1px solid #ddd;margin: 0 auto;margin-bottom: 10px;}
.list ul li{width: 200px;height: 240px;float: left;margin: 10px;}
.list ul li img{width: 200px;height: 240px;}
.view{width: 880px;margin: 0 auto;border: 1px solid #ddd;min-height: 300px;position: relative;}
.view span{float: left;width: 293px;height: 40px;border-bottom: 1px solid #ddd;text-align: center;line-height: 40px;}
.view .allMoney{position: absolut