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. 初学者--bootstrap(六)组件中的下拉菜单----在路上(10)

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

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

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

  4. Bootstrap_下拉菜单

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

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

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

  6. Bootstrap下拉菜单

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

  7. 详解Bootstrap下拉菜单组件

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

  8. Bootstrap中的各种下拉菜单

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

  9. bootstrap——下拉菜单右对齐

    通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropd ...

随机推荐

  1. Oracl各个版本的下载地址

    http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/112010-win32soft-098630-z ...

  2. FZU1894 志愿者选拔 --单调队列

    做法:维护一个单调递减序列,只需输出序列中的第一个元素即可. 对于命令我们可以进行不同的处理: 如果是Q命令,则判断当前队列中是否仍有元素,如果没有则输出-1,如果有则直接输出队首. 如果是G命令,则 ...

  3. HTTP请求与响应方式

    HTTP请求格式 当浏览器向Web服务器发出请求时,它向服务器传递了一个数据块,也就是请求信息,HTTP请求信息由3部分组成: l   请求方法URI协议/版本 l   请求头(Request Hea ...

  4. iOS 里面如何使用第三方应用程序打开自己的文件,调用wps其他应用打开当前应用里面的的ppt doc xls

    我们的自己的应用里面经常涉及的要打开ppt doc,这样的功能,以前总以为iOS沙盒封闭化,不可能实现,后来终于解决了 使用 UIDocumentInteractionController 来解决这一 ...

  5. POJ 1734 Sightseeing trip

    题目大意: 求一个最小环. 用Floyd 求最小环算法. #include <iostream> #include <cstdlib> #include <cstdio& ...

  6. System V 机制(转)

    引言 UNIX 内核管理的进程自主地操作,从而产生更稳定的系统.然而,每个开发人员最终都会遇到这样的情况,即其中一组进程需要与另一组进程通信,也许是为了交换数据或发送命令.这种通信称为进程间通信(In ...

  7. JDBC公共操作类

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  8. (转)SimpleDateFormat使用

    1  SimpleDateFormat public class SimpleDateFormat extends DateFormat SimpleDateFormat 是一个以国别敏感的方式格式化 ...

  9. Python解决 从1到n整数中1出现的次数

    最近在看<剑指Offer>,面试题32的题目:输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数.例如输入12,从1到12这些整数中包含1的数字有1.10.11和12,1一共出 ...

  10. MVC Json方法里的一个坑

    MVC Controller类下面有这样一个方法 // // Summary: // Creates a System.Web.Mvc.JsonResult object that serialize ...