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. java常用类 --- Object

    Object类 Object类是所有Java类的父类,其位于java.lang包中.任何Java对象,如果没有显示定义父类则它默认Object类作为父类. 方法如下: 其中与线程相关的有5个方法: n ...

  2. ktouch移动端事件库

    最近闲来无事,写了个移动端的事件库,代码贴在下面,大家勿拍. /** @version 1.0.0 @author gangli @deprecated 移动端触摸事件库 */ (function ( ...

  3. sql事务和锁

    摘自:http://www.cnblogs.com/lxconan/archive/2011/10/20/sql_transaction_n_locks_1.html 最近在项目中进行压力测试遇到了数 ...

  4. Windows疑难杂症之开机无法显示桌面。

    开机无法显示桌面可能有以下两种情况. 1.系统故障或病毒引起explorer.exe无法加载启动. 2.注册表故障造成默认的值不是explorer.exe.(可能是安装了某些软件造成此问题) 3,某开 ...

  5. Redis数据库的使用与介绍

    本周11-15号开始用Redis数据库在现有的平台基础上开发一个独立模块,这是一个边学习.边记录.边交流.边开发.边总结的过程.大部分随笔都是个人的“工作日志”,旨在记录自己学习过程中收集的一些资料, ...

  6. cocos2d-x内存管理（见解）

    cocos2d-x 延续了cocos2d 和OC的引用计数的内存管理机制! 下面我们来看看CCDriectro类 CCPoolManager::sharedPoolManager()->push ...

  7. sql存储过程几个简单例子

    导读:sql存储是数据库操作过程中比较重要的一个环节,对于一些初学者来说也是比较抽象难理解的,本文我将通过几个实例来解析数据库中的sql存储过程,这样就将抽象的事物形象化,比较容易理解. 例1: cr ...

  8. php中向mysql插入数据

     $sql='insert into news(title,subtitle,source,publishtime,content,image,author) values("'.unico ...

  9. iOS开发——高级篇——地图 MapKit

    一.简介 1.在移动互联网时代,移动app能解决用户的很多生活琐事,比如周边:找餐馆.找KTV.找电影院等等导航:根据用户设定的起点和终点,进行路线规划,并指引用户如何到达 在上述应用中,都用到了定位 ...

  10. .net生成二维码

    下好QRCode.dll引用到项目中 using System; using System.Collections.Generic; using System.Linq; using System.W ...