时空萌新
- 阅读权限
- 10
- 在线时间
- 35 小时
- 注册时间
- 2017-7-28
- 最后登录
- 2017-10-19
- UID
- 156
- 时空币
- 136
- 时之结晶
- 53
- 最后登录
- 2017-10-19
|
本帖最后由 HelloWord 于 2017-8-31 18:01 编辑
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>test</title>
- <meta id="meta-viewport" name="viewport" content="width=device-width">
- <style type="text/css">
- .sortable {
- border: solid 1px #ddd;
- padding: 20px 30px;
- margin: 100px;
- }
-
- .sortable .item {
- width: 210px;
- border: solid 1px #ccc;
- line-height: 30px;
- padding-left: 10px;
- cursor: move;
- transition: all .2s ease;
- }
-
- .sortable .item strong {
- color: #333;
- -webkit-user-select: none;
- }
- </style>
- </head>
- <body>
- <div class="sortable" id="sortable">
- <div class="item">
- <strong>吸血恶魔兽</strong>
- </div>
- <div class="item">
- <strong>超究极魔兽</strong>
- </div>
- <div class="item">
- <strong>恶魔兽</strong>
- </div>
- <div class="item">
- <strong>小丑皇兽</strong>
- </div>
- <div class="item">
- <strong>小恶魔兽</strong>
- </div>
- <div class="item">
- <strong>究极恶魔兽</strong>
- </div>
- </div>
- <script>
- var itemArr = document.getElementsByClassName('item');
- for(var i = 0; i < itemArr.length; i++) {
- itemArr[i].setAttribute('draggable', 'true');
- itemArr[i].dataset.order = i;
- }
- var targetY = 0;
- var itemHeight = itemArr[0].innerHeight;
- var nowItem = "";
- var targetItem = "";
-
- //拖拽开始
- document.addEventListener('dragstart', function(event) {
- event.target.style.opacity = "0.4";
- nowItem = event.target.dataset.order;
- }, false)
-
- //拖拽中
- document.addEventListener('drag', function(event) {
- if(event.pageY >= targetY ) {
- document.getElementById('sortable').insertBefore(event.target, targetItem.nextSibling);
- }else{
- document.getElementById('sortable').insertBefore(event.target, targetItem);
- }
- }, false)
-
- //拖拽结束
- document.addEventListener('dragend', function(event) {
- event.target.style.opacity = "1";
- for(var i = 0; i < itemArr.length; i++) {
- itemArr[i].dataset.order = i;
- }
- }, false)
-
- //拖拽到目标
- document.addEventListener("dragenter", function(event) {
- if(event.target.className == "item" ) {
- console.log('目标:' + event.pageY);
- targetY = event.pageY;
- targetItem = event.target;
- } else {
- console.log("不是拖动目标");
- }
- });
- </script>
- </body>
- </html>
复制代码
|
|