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. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  2. ASP.NET MVC 4 的JS/CSS打包压缩功能-------过滤文件

    今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...

  3. [译]通过IIS Request Filtering解决SQL Server CPU高的问题

    原文http://www.peterviola.com/solving-sql-server-high-cpu-with-iis-request-filtering/ Top Queries by T ...

  4. 服务器上的json类型的文件提示找不到

    搞Google地图的时候, 本地是可以显示的, 但是到了服务器上地图一直显示不出来, 火狐打开F12,发现是找不到json的文件, 本来还以为是IIS中"请求筛选"的问题,后来发现 ...

  5. C#深入浅出 修饰符（二）

    1.函数参数前的修饰符 params ,ref ,out params修饰的数据类型只能数组,用于参数不固定时:且此参数位于所有形式参数的最后: public static int GetMax(pa ...

  6. 2013nanjingJ

    J - Ball Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  7. hash-2.hashMap

    1.HashMap的数据结构 a.HashMap是一个链表散列的结合体,即,数组和链表的结合体. b.HashMap类中定义了Entry类型的数组,Entry [ ] ,Entry有key value ...

  8. [Asp.net MVC]Asp.net MVC5系列——添加数据

    目录 概述 显示添加数据时所用表单 处理HTTP-POST 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列 ...

  9. iOS开发网络篇—大文件的多线程断点下载

    http://www.cnblogs.com/wendingding/p/3947550.html iOS开发网络篇—多线程断点下载 说明:本文介绍多线程断点下载.项目中使用了苹果自带的类,实现了同时 ...

  10. FTP 传输中的主动模式和被动模式

    最近做一个项目用到FTP和其它系统进行文件传输,结果在FTP网络连接的问题上花了很多时间,由于太久没搞多FTP,忘记了FTP不单单开放21端口,客户端采用不同连接模式对网络有不同.在此重温一下FTP的 ...