js中drag拖拽

最新推荐文章于 2024-08-10 08:00:51 发布

高先生的猫

最新推荐文章于 2024-08-10 08:00:51 发布

阅读量3.1k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/z591102/article/details/107687389

版权

JavaScript 专栏收录该内容

730 篇文章 72 订阅

订阅专栏

在没有drag事件的时候，做元素拖拽使用的都是mouse事件，但mouse在处理过程中可能有这样或那样的问题，主要还是感觉不流畅，如果小伙伴们不在考虑低版本IE(<IE9)的话，可以偿试一下drag，会有意想不到的收获。。

下面来展示下drap的主要事件

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

dataTransfer对象(了解就行了)：

dropEffect 设置放下效果（copy move link none）
effectAllowed 允许的效果 (copy move link copyLink copyMove linkMove all
none uninitialized(默认值，等同于all))
files FileList对象
setDragImage()
setData()
getData()
clearData()

演示效果

html:

<div class="box">
    <ul>
        <li id="li1" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题一</li>
        <li id="li2" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题二</li>
        <li id="li3" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题三</li>
        <li id="li4" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题四</li>
        <li id="li5" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">标题五</li>
    </ul>
</div>
<div class="box">
    <ul ondrop="drop(event)" ondragenter="dragenter(event)" ondragover="dragover(event)" ondragleave="dragleave(event)">

    </ul>
</div>

js:

<script>
    var $ = document.querySelectorAll.bind(document);

    // 开始拖拽元素
    function dragstart(e) {
        e.dataTransfer.setData('li',e.target.id);
        console.log('%c 1、开始拖拽(dragstart)', 'color: green;')
    }

    // 拖拽元素进入目标窗器
    function dragenter(e) {
        console.log('%c 2、拖拽元素进入目标窗器(dragenter)', 'color: orange;')
    }

    // 拖拽元素悬浮目标窗器上
    function dragover(e) {
        e.preventDefault();
        $('.box')[1].style.border = '1px dashed red';
        console.log('%c 3、拖拽元素悬浮目标窗器上(dragover)', 'color: red;')
    }

    // 拖拽元素离开目标窗器
    function dragleave(e) {
        $('.box')[1].style.border = 'none';
        console.log('%c 4、拖拽元素离开目标窗器(dragleave)', 'color: black;')
    }

    // 放下拖拽元素
    function drop(e) {
        e.preventDefault();
        var li = e.dataTransfer.getData('li');
        if(e.target.nodeName === 'UL') {
            e.target.appendChild(document.getElementById(li));
        } else {
            liNode = document.getElementById(li);
            e.target.parentNode.insertBefore(liNode, e.target);
        }
        $('.box')[1].style.border = 'none';
        console.log('%c 5、放下拖拽元素(drop)', 'color: blue;')
    }

    // 完成拖拽
    function dragend(e) {
        console.log('%c 6、完成拖拽(dragend)', 'color: gray;')
    }
</script>

在dragover和drop环节上阻止默认事件(e.preventDefault())是少不了的，，不信的少侠可以尝试一下，以来印证老夫所言非虚。。。哈哈哈，偏偏然，隐身山林中……

控制台打印

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖动</title>
    <script src="jquery.min.js"></script>
    <script>
    var log = console.log.bind(console);
    </script>
</head>
<body>
    <style>
    *{margin: 0;padding: 0;list-style: none;}
    .list li{float: left;height: 36px;padding: 0 10px;margin: 10px 0 0 10px;border: 1px solid #ddd;line-height: 36px;}
    .list .active{border-color: green;color: green;}
    .list .dashed{display: none;border-style: dashed;}
    .list .num{margin-right: 5px;}
    </style>

    <ul class="list">
        <li class="dashed" ondrop="drop(event)" >="0"></li>
        <li class="active" draggable="true" >="1"><span class="num">1</span><label><input type="checkbox" checked="checked">天天向上1</label></li>
        <li class="active" draggable="true" >="2"><span class="num">2</span><label><input type="checkbox" checked="checked">天天向上22</label></li>
        <li class="active" draggable="true" >="3"><span class="num">3</span><label><input type="checkbox" checked="checked">天天向上333</label></li>
        <li >="4"><span class="num">4</span><label><input type="checkbox">天天向上4444</label></li>
        <li >="5"><span class="num">5</span><label><input type="checkbox">天天向上55555</label></li>
        <li class="active" draggable="true" >="6"><span class="num">6</span><label><input type="checkbox" checked="checked">天天向上666666</label></li>
        <li >="7"><span class="num">7</span><label><input type="checkbox">天天向上7777777</label></li>
        <li >="8"><span class="num">8</span><label><input type="checkbox">天天向上88888888</label></li>
        <li >="9"><span class="num">9</span><label><input type="checkbox">天天向上999999999</label></li>
    </ul>

    <script>
        var dragEleWth; // 拖动元素宽度
        $('.list li').click(function(e) { // 勾选
            e.preventDefault();
            if($(this).hasClass('active')) {
                $(this).removeClass('active').removeAttr('draggable').find(':checkbox').prop('checked', false);
            } else {
                $(this).addClass('active').attr('draggable', true).find(':checkbox').prop('checked', true);
            }
        }).on('dragstart', function(e) { // 拖动元素
            dragEleWth = $(this).width();
            e.originalEvent.dataTransfer.setData('order', +$(this).data('order'));
        }).on('dragover', function(e) { // 拖动悬浮
            e.preventDefault();
            if($(this).hasClass('active')) {
                $('.list .dashed').show().width(dragEleWth);
                $(this).before($('.list .dashed'));
            }
        });
        // 放下
        function drop(e) {
            e.preventDefault();
            var order = e.dataTransfer.getData('order');
            var dashedLi = $('.list .dashed');
            dashedLi.before($('[token operator">+order+'"]'));
            dashedLi.hide().removeAttr('style');
            $('.list').prepend(dashedLi);
            $('.list li').each(function(i) {
                $(this).attr('>, i).children('.num').text(i);
            });
        }
    </script>
</body>
</html>