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. Lnmp的安装、配置

    一.首先在本地安装好虚拟机,在虚拟机上安装centos6.5,由于习惯问题,不喜欢直接在虚拟机上操作linux系统,习惯了ssh过去,直接用xshell操作,这完全是个人习惯问题: 1.  用xshe ...

  2. webapp中fixed问题解决方案

    主要问题: 1,头部输入框固定后,只要再滑动内容的话,输入框会随着滑动内容而滑动. 2,在低端机:2.3以下的安卓机,你会发现怎么解决都不行的,系统浏览器是不会支持的,头部底部固定的话会滑动内容而滑动 ...

  3. [设计模式] javascript 之 迭代子模式

    迭代子模式:定义 迭代子模式,又称游标模式,是一种用于对聚集进行顺序访问规则的模式,是一种行为模式:它用于提供对聚集对象的一种统一的访问接口,使客户能够在不了解聚集对象内部结构的情况对聚集对象进行访问 ...

  4. fullPage 全屏滚动【上下滚动】效果

    由于个人能力,研究了两天,终于写出来了. 又花了一天的时间成功的将30多行脚本,改成了70多行,我也是够有心的了. 那么接下来就是我制作这个效果的全部过程. 那一年我十七,她十八,在那个夏天里,我们, ...

  5. NetBeans使用习惯：升级与保存配置

    如何升级:点击 netbeans 的升级更新 ,即可升级版本:不推荐官网下载进行安装,否则会出现,以前的旧版本8.0的目录和8.0.1目录,虽然它会自动检测到以前版本的配置,提示导入... 如何备份: ...

  6. RGB颜色矩提取算法——Matlab

    一.颜色矩公式 一阶颜色矩——均值,反映图像明暗程度 二阶颜色矩 ——标准差,反映图像颜色分布范围 三阶颜色矩 ——方差,反映图像颜色分布对称性 二.方法一: firstMoment = mean(m ...

  7. 安装wampserver 2.5的时候出现丢失MSVCR100.dll的解决办法。

    转载地址:http://www.mafutian.net/127.html

  8. Hibernate面试题

    一.谈一谈Hibernate的缓存机制 1.一级缓存: 内部缓存存在于HIbernate中又叫一级缓存,他属于应用事务级缓存. 2.二级缓存: 01.应用级缓存. 02.分布式缓存. 条件:数据不会被 ...

  9. tcp三次握手与四次挥手

  10. bootstrap-carousel

    功能:轮播插件carousel, 主要用于首页大图片的显示与左右按钮的点击滑动图片 插件:carouse.js 要点:class="carousel slide"里的data-sl ...