1，实现功能：从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中

并实现app向后移动一个元素的位置；

2.实现思路：

01.遍历下拉菜单，添加拖拽方法，实现位置移动功能；

02.遍历app列表，将app位置存为数组，进行循环；

03.拖拽元素与当前app做碰撞检测；

04.如果鼠标在app内部，则将拖拽元素添加到当前app之后，位置设置为当前 i 的值；

参考代码如下：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style>

    #tp{height:50px;width:310px;margin：0 auto;list-style:none;}

    .tps{height:40px;width:60px;float:left;text-align:center;background:#e4393c;line-height:40px;margin-right:1px;

    }

    .container{height:500px;width:600px;background:#ccc;margin:0 auto;}

    .container ul{list-style:none;height:300px;width:500px;margin:0 auto;}

    .inner{height:40px;width:59px;float:left;text-align:center;background:#666;line-height:40px;margin-right:1px;

            margin-top:1px;

    }

    .green{background:green;}

  </style>

  <script src="jquery.min.js" type="text/javascript"></script>

 </head>

 <body>

  <ul id="tp">

    <li class="tps">关于我</li>

    <li class="tps">你好</li>

    <li class="tps">信息</li>

    <li class="tps">服务</li>

    <li class="tps">假期</li>

  </ul>

  <div class="container">

    <ul>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

        <li class="inner"></li>

    </ul>

 </div>

    <script>

    $(function(){

        function Pointer(x,y){

            this.x = x;

            this.y = y;

        }

        function Position(left,top){

            this.left = left;

            this.top = top;

        }

        $('.tps').each(function(i){

            this.init = function(){

                $(this).attr('index',i);

                this.drag();

            }

            this.moveback = function(callback){

                $(this).animate({

                    left:this.pos.left,

                    top:this.pos.top

                },500)

            }

            this.Check = function(){

                var currentItem  =  this;

                var clision = null;

                var position = [];

                $('.inner').each(function(){

                    const { top, left } = $(this).offset();

                    position.push({

                        top:top,

                        left:left

                    });

                    $(this).attr('index',i);

                    //index.push($(this).index());

                                            if(    currentItem.pointer.x >$(this).offset().left &&

                                        currentItem.pointer.y > $(this).offset().top &&

                                        (currentItem.pointer.x < $(this).offset().left + $(this).width()) &&

                                        (currentItem.pointer.y < $(this).offset().top + $(this).height())

                                    ){

                                        $(this).after($(currentItem));

                                    }

                })

                    //console.log(startIndex)

                    //console.log(endIndex)

                    console.log(position)

            }

            this.add = function(){

            }

            this.drag = function(){

                var oldposition = new Position();

                var oldpointer = new Pointer();

                var currentItem  = null;

                var isDrag = false ;

                $(this).mousedown(function(e){

                    e.preventDefault();

                    oldposition.left = $(this).offset().left;

                    oldposition.top  = $(this).offset().top;

                    oldpointer.x = e.clientX;

                    oldpointer.y = e.clientY;

                    currentItem = this;

                    isDrag = true;

                })

                $(document).mousemove(function(e){

                    var currentpointer = new Pointer(e.clientX,e.clientY);

                    if(!isDrag) return false;

                    $(currentItem).css('opacity',0.7);

                    var left = currentpointer.x - oldpointer.x + oldposition.left;

                    var top  = currentpointer.y - oldpointer.y + oldposition.top;

                    $(currentItem).css({

                    position:'absolute',

                    left : left,

                    top : top

                    });

                    currentItem.pointer = currentpointer;

                })

                $(document).mouseup(function(){

                    if(!isDrag) return false;

                    isDrag = false;

                    $(currentItem).css({

                    position:'',

                    });

                    /**

                    currentItem.moveback(function(){

                        $(this).css({

                            "opacity" : "1",

                            "z-index" : 0

                        });

                    });

                    **/

                    currentItem.Check();

                })

            }

            this.init();

        })

    })

    </script>

  </div>

 </body>

</html>

仅作参考 。。。。。

从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中的更多相关文章

  1. Flutter交互实战－即刻App探索页下拉＆拖拽效果

    前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑:我这篇文章主要介绍如何使用Flutter实现一个比较复杂的手势交互,顺便分享一下我在使用Flutter过程中遇 ...

  2. 拖拽一个元素如此简单，mouse、drag、touch三兄弟的用处

    最近需要做一个投票活动,上传图片时需要拖拽.缩放来裁剪图片,vue的组件不少,不过自己动手才能丰衣足食,一味使用别人的组件实在难以进步,所以自己研究一番. 一.mouse.drag.touch傻傻分不 ...

  3. 初学者--bootstrap（六）组件中的下拉菜单----在路上（10）

    组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...

  4. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  5. Bootstrap_下拉菜单

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件. 一.普通下拉菜单 <div class="dropdown"&g ...

  6. Bootstrap系列 -- 24. 下拉菜单基本用法

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文 ...

  7. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  8. 详解Bootstrap下拉菜单组件

    bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...

  9. Bootstrap中的各种下拉菜单

    @*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...

随机推荐

  1. SAMBA 共享服务器搭建

    yum install samba service smb start chkconfig smb on 1.给要共享的文件夹赋权限 777 2.修改 smb 的配置文件:/etc/samba/smb ...

  2. 清北学堂模拟day6 花

    [问题描述] 商店里出售n种不同品种的花.为了装饰桌面,你打算买m支花回家.你觉得放两支一样的花很难看,因此每种品种的花最多买1支.求总共有几种不同的买花的方案?答案可能很大,输出答案mod p的值. ...

  3. 关于高性能Web服务的一点思考

    下面这些概念对于专业做性能测试的会比较熟悉,但是对于开发人员不一定都那么清楚. 并发用户数: 某一时刻同时请求服务器的用户总数,通常我们也称并发数,并发连接数等. 吞吐率:对于web服务器来说就是每秒 ...

  4. Go - 内置函数大全

    Package builtin import "builtin" Overview Index Overview ▾ Package builtin provides docume ...

  5. 扩展RBAC用户角色权限设计方案

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...

  6. .net 默认时间格式不正确

    经测试发现,有时通过在“日期.时间.语言和区域设置”里面设置是无效的. 对应键值为HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"OLEAUT ...

  7. jq常用的方法

    .eq(i) //获取第几个元素 .text() //获取或设置元素文本内容 .html() //获取或设置元素html代码内容 .val() //获取或设置表单元素值 .attr() //获取或设置 ...

  8. 如何预览github中的html页面

    在github里面的文件路径是https://github.com/gavin125/Sass-test/blob/master/html/index.html 那么我们需要在这个地址前面加上http ...

  9. java78_c

    import java.util.*; public class Main { public static void main(String args[]){ Scanner cin=new Scan ...

  10. ndk学习6: 使用gdb调试ndk程序一

    生成debug版程序 方法一: 使用ndk-build编译时,加上如下参数NDK_DEBUG=1,之后生成so文件之外,还会生成gdbobserver,gdb.setup调式文件   方法二: 修改A ...