drag拖拽丨技术开发分享录

drag拖拽

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"在没有drag事件的时候,做元素拖拽使用的都是mouse事件,但mouse在处理过程中可能有这样或那样的问题,主要还是感觉不流畅,如果小伙伴们不在考虑低版本IE(<IE9)的话,可以偿试一下drag,会有意想不到的收获。。\n\n下面来展示下drap的主要事件\n\n在拖动目标上触发事件 (源元素):\n\n - ondragstart - 用户开始拖动元素时触发\n - ondrag - 元素正在拖动时触发\n - ondragend - 用户完成元素拖动后触发\n\n释放目标时触发的事件:\n\n - ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件\n - ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件\n - ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件\n - ondrop - 在一个拖动过程中,释放鼠标键时触发此事件\n\ndataTransfer对象(了解就行了):\n\n - dropEffect 设置放下效果(copy move link none)\n - effectAllowed 允许的效果 (copy move link copyLink copyMove linkMove all\n   none uninitialized(默认值,等同于all))\n - files FileList对象\n - setDragImage()\n - setData()\n - getData()\n - clearData()\n\n演示效果\n![](https://segmentfault.com/img/bVE14C?w=631&h=361)\n\n\nHTML:\n\n```html\n<div class=\"box\">\n    <ul>\n        <li id=\"li1\" draggable=\"true\" ondragstart=\"dragstart(event)\" ondragend=\"dragend(event)\">标题一</li>\n        <li id=\"li2\" draggable=\"true\" ondragstart=\"dragstart(event)\" ondragend=\"dragend(event)\">标题二</li>\n        <li id=\"li3\" draggable=\"true\" ondragstart=\"dragstart(event)\" ondragend=\"dragend(event)\">标题三</li>\n        <li id=\"li4\" draggable=\"true\" ondragstart=\"dragstart(event)\" ondragend=\"dragend(event)\">标题四</li>\n        <li id=\"li5\" draggable=\"true\" ondragstart=\"dragstart(event)\" ondragend=\"dragend(event)\">标题五</li>\n    </ul>\n</div>\n<div class=\"box\">\n    <ul ondrop=\"drop(event)\" ondragenter=\"dragenter(event)\" ondragover=\"dragover(event)\" ondragleave=\"dragleave(event)\">\n        \n    </ul>\n</div>\n```\n\nJS:\n\n```html\n<script>\n    var $ = document.querySelectorAll.bind(document);\n\n    // 开始拖拽元素\n    function dragstart(e) {\n        e.dataTransfer.setData('li',e.target.id);\n        console.log('%c 1、开始拖拽(dragstart)', 'color: green;')\n    }\n\n    // 拖拽元素进入目标窗器\n    function dragenter(e) {\n        console.log('%c 2、拖拽元素进入目标窗器(dragenter)', 'color: orange;')\n    }\n\n    // 拖拽元素悬浮目标窗器上\n    function dragover(e) {\n        e.preventDefault();\n        $('.box')[1].style.border = '1px dashed red';\n        console.log('%c 3、拖拽元素悬浮目标窗器上(dragover)', 'color: red;')\n    }\n\n    // 拖拽元素离开目标窗器\n    function dragleave(e) {\n        $('.box')[1].style.border = 'none';\n        console.log('%c 4、拖拽元素离开目标窗器(dragleave)', 'color: black;')\n    }\n\n    // 放下拖拽元素\n    function drop(e) {\n        e.preventDefault();\n        var li = e.dataTransfer.getData('li');\n        if(e.target.nodeName === 'UL') {\n            e.target.appendChild(document.getElementById(li));\n        } else {\n            liNode = document.getElementById(li);\n            e.target.parentNode.insertBefore(liNode, e.target);\n        }\n        $('.box')[1].style.border = 'none';\n        console.log('%c 5、放下拖拽元素(drop)', 'color: blue;')\n    }\n\n    // 完成拖拽\n    function dragend(e) {\n        console.log('%c 6、完成拖拽(dragend)', 'color: gray;')\n    }\n</script>\n```\n在dragover和drop环节上阻止默认事件(e.preventDefault())是少不了的,,不信的少侠可以尝试一下,以来印证老夫所言非虚。。。哈哈哈,偏偏然,隐身山林中……\n\n控制台打印\n![](https://segmentfault.com/img/bVE149?w=528&h=235)\n\n\n示例\n![](https://segmentfault.com/img/bVK0n9?w=600&h=152)\n\n完整代码\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>拖动</title>\n    <script src=\"jquery.min.js\"></script>\n    <script>\n    var log = console.log.bind(console);\n    </script>\n</head>\n<body>\n    <style>\n    *{margin: 0;padding: 0;list-style: none;}\n    .list li{float: left;height: 36px;padding: 0 10px;margin: 10px 0 0 10px;border: 1px solid #ddd;line-height: 36px;}\n    .list .active{border-color: green;color: green;}\n    .list .dashed{display: none;border-style: dashed;}\n    .list .num{margin-right: 5px;}\n    </style>\n    \n    <ul class=\"list\">\n        <li class=\"dashed\" ondrop=\"drop(event)\" data-order=\"0\"></li>\n        <li class=\"active\" draggable=\"true\" data-order=\"1\"><span class=\"num\">1</span><label><input type=\"checkbox\" checked=\"checked\">天天向上1</label></li>\n        <li class=\"active\" draggable=\"true\" data-order=\"2\"><span class=\"num\">2</span><label><input type=\"checkbox\" checked=\"checked\">天天向上22</label></li>\n        <li class=\"active\" draggable=\"true\" data-order=\"3\"><span class=\"num\">3</span><label><input type=\"checkbox\" checked=\"checked\">天天向上333</label></li>\n        <li data-order=\"4\"><span class=\"num\">4</span><label><input type=\"checkbox\">天天向上4444</label></li>\n        <li data-order=\"5\"><span class=\"num\">5</span><label><input type=\"checkbox\">天天向上55555</label></li>\n        <li class=\"active\" draggable=\"true\" data-order=\"6\"><span class=\"num\">6</span><label><input type=\"checkbox\" checked=\"checked\">天天向上666666</label></li>\n        <li data-order=\"7\"><span class=\"num\">7</span><label><input type=\"checkbox\">天天向上7777777</label></li>\n        <li data-order=\"8\"><span class=\"num\">8</span><label><input type=\"checkbox\">天天向上88888888</label></li>\n        <li data-order=\"9\"><span class=\"num\">9</span><label><input type=\"checkbox\">天天向上999999999</label></li>\n    </ul>\n\n    <script>\n        var dragEleWth; // 拖动元素宽度\n        $('.list li').click(function(e) { // 勾选\n            e.preventDefault();\n            if($(this).hasClass('active')) {\n                $(this).removeClass('active').removeAttr('draggable').find(':checkbox').prop('checked', false);\n            } else {\n                $(this).addClass('active').attr('draggable', true).find(':checkbox').prop('checked', true);\n            }\n        }).on('dragstart', function(e) { // 拖动元素\n            dragEleWth = $(this).width();\n            e.originalEvent.dataTransfer.setData('order', +$(this).data('order'));\n        }).on('dragover', function(e) { // 拖动悬浮\n            e.preventDefault();\n            if($(this).hasClass('active')) {\n                $('.list .dashed').show().width(dragEleWth);\n                $(this).before($('.list .dashed'));\n            }\n        });\n        // 放下\n        function drop(e) {\n            e.preventDefault();\n            var order = e.dataTransfer.getData('order');\n            var dashedLi = $('.list .dashed');\n            dashedLi.before($('[data-order=\"'+order+'\"]'));\n            dashedLi.hide().removeAttr('style');\n            $('.list').prepend(dashedLi);\n            $('.list li').each(function(i) {\n                $(this).attr('data-order', i).children('.num').text(i);\n            });\n        }\n    </script>\n</body>\n</html>\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看