js中drag拖拽

更新日期: 2020-02-28阅读: 2.6k标签: 拖拽

在没有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>

链接: https://fly63.com/article/detial/8802

原生js实现拖拽与拖放事件,JavaScript实现元素拖拽、图片到指定区域进行预览的例子

拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改。原生Js实现元素拖拽、图片到指定区域进行预览的方法实现

Vue自定义指令:通过Vue.directive实现集成第三方插件,拖拽功能,图片加载等功能

当我们需要对Dom元素进行底层操作的时候,这时候我们就需要使用vue的自定义指令。这篇文章将讲解:如何注册Vue自定义指令?Vue的钩子函数,vue钩子函数参数,vue实现拖拽功能,实现图片加载功能,Vue自定义指令集成第三方插件 ...

移动端拖拽 - 固定定位 fixed

移动端的拖拽有两种主流的实现方案:1. 将元素设置为固定定位,然后在拖拽的时候修改其定位,实现拖拽的效果;2. 使用 transform 中的平移 translate 属性实现拖拽。

vue模块拖拽实现

正巧在之前面试中遇到问实现拖拽效果。当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事,把这个东西实现了一下。原理很简单,写的很方便。

原生js实现拖拽功能

如果要设置物体拖拽,必须使用三个事件,分别是:1、onmousedown:鼠标按下事件2、onmousemove:鼠标移动事件3、onmouseup:鼠标抬开事件

js实现本地图片文件拖拽效果

如何拖拽图片到指定位置,具体方法如下,在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码

ngDraggable.js_AngularJS之拖拽排序

ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;ng-drop:是否允许放入拖拽元素

拖放实现--兼容手机与pc端

拖放是一种非常流行的用户界面模式。它的概念很简单:点击某个对象,并按住鼠标按钮不放,将鼠标移到到另一个区域,然后释放按钮将对象放到这里。

实现平滑过渡的拖拽排序

最近重读Vue官方文档,在列表的排序过渡这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下

Element ui表格组件+sortablejs实现行拖拽排序

运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便;实现方式:template部分、script部分

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!