股票场内基金交易，没时间盯盘？
使用优财助手电脑客户端记录下您的股票买入卖出数据，能帮您时刻盯盘，会根据您记录的未售出买入价计算上涨或下跌幅度，及时弹框通知您。想知道如何使用？快点击左方视频观看了解吧~~下载地址：http://youcaizhushou.com
上期介绍了html与js拖动的知识点，这一期我们来实现下拖动排序
思路
- 在一个列表中，每个元素都可以被拖放，那首先要给每个元素设置 draggable 属性为 true。
- 监听每个元素的 dragstart 事件，对源对象做样式处理来区分。
- 监听每个元素的 dragenter 事件，当源对象进入到当前元素里，就把源对象添加到该元素之前。这样子后面的元素就会被源对象挤下去了，实现了排序的效果。
- 但是会发现，源对象无法排到最后一个去，只能在倒数第二。这时就要监听 dragleave 事件，当过程对象是最后一个元素时，源对象离开了过程对象，这时就把源对象添加到最后去。
主要代码如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>drag demo</title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; } #app{ position: relative; width: 100%; height: 100%; max-width: 980px; margin: auto; } .list{ padding:10px; height: 20px; border-bottom: 1px solid #ddd; } #recycle{ position: absolute; bottom: 0; width: 100%; height: 70px; line-height: 70px; text-align: center; background: #ddd; } </style> </head> <body> <div id="app"> <div class="main"> <div class="list" draggable="true">这里是列表1的标题</div> <div class="list" draggable="true">这里是列表2的标题</div> <div class="list" draggable="true">这里是列表3的标题</div> <div class="list" draggable="true">这里是列表4的标题</div> <div class="list" draggable="true">这里是列表5的标题</div> <div class="list" draggable="true">这里是列表6的标题</div> <div class="list" draggable="true">这里是列表7的标题</div> </div> <div id="recycle">回收站</div> </div> <script src="index.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// index.js var iosDragDropShim = { enableEnterLeave: true } // 兼容移动端 var source = document.querySelectorAll('.list'), recycle = document.getElementById('recycle'), dragElement = null, // 用于存放拖动元素 lock = true; // 最后元素拖放拖放时会进入enter和leave的循环，用来锁住 for(var i = 0; i < source.length; i++){ source[i].addEventListener('dragstart',function(ev){ dragElement = this; // 用于存放拖动元素 this.style.backgroundColor = '#f8f8f8'; // 设置拖动元素的背景 },false); source[i].addEventListener('dragend',function(ev){ ev.target.style.backgroundColor = '#fff'; // 拖放结束还原拖动元素的背景 ev.preventDefault(); },false) source[i].addEventListener('dragenter', function(ev){ if(dragElement != this){ this.parentNode.insertBefore(dragElement,this); // 把拖动元素添加到当前元素的前面 } }, false) source[i].addEventListener('dragleave', function(ev){ console.log(111); if(dragElement != this){ if(lock && (this == this.parentNode.lastElementChild || this == this.parentNode.lastChild)){ // 当前元素时最后一个元素 this.parentNode.appendChild(dragElement); // 把拖动元素添加最后面 lock = false; }else{ lock = true; } } }, false) }; recycle.addEventListener('drop', function(ev){ // 拖进回收站则删除该元素 dragElement.parentNode.removeChild(dragElement); }, false) document.ondragover = function(e){e.preventDefault();} // 必须设置dragover阻止默认事件 document.ondrop = function(e){e.preventDefault();} |
实现效果：
当然，代码比较繁琐，最简单的方式就是去github上找lib，只需一行代码即可实现拖放排序
想获得去掉 5 元限制的证券账户吗？
证券交易股票基金的佣金，不足 5 元会按照 5 元收取。比如交易 1000 元的股票，按照普遍的证券佣金手续费率万 2.5，其交易佣金为 0.25 元，小于 5 元，实际会收取佣金 5 元，买卖两次需要支付 10 元佣金成本，1% 的利润就这样没了。
如果您想去掉最低交易佣金 5 元限制，使用微信扫描左边小程序二维码，访问微信小程序「优财助手」，点击底部菜单「福利」，阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」，按照文章步骤操作即可获得免 5 元证券账户，股票基金交易手续费率万 2.5。
请注意，一定要按照文章描述严格操作，如错误开户是无法获得免 5 元证券账户的。
如果您想去掉最低交易佣金 5 元限制，使用微信扫描左边小程序二维码，访问微信小程序「优财助手」，点击底部菜单「福利」，阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」，按照文章步骤操作即可获得免 5 元证券账户，股票基金交易手续费率万 2.5。
请注意，一定要按照文章描述严格操作，如错误开户是无法获得免 5 元证券账户的。