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

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

2.实现思路：

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

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

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

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

参考代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="Generator" content="EditPlus®">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9.   <title>Document</title>
  10.   <style>
  11.     #tp{height:50px;width:310px;margin：0 auto;list-style:none;}
  12.     .tps{height:40px;width:60px;float:left;text-align:center;background:#e4393c;line-height:40px;margin-right:1px;
  13.     }
  14.     .container{height:500px;width:600px;background:#ccc;margin:0 auto;}
  15.     .container ul{list-style:none;height:300px;width:500px;margin:0 auto;}
  16.     .inner{height:40px;width:59px;float:left;text-align:center;background:#666;line-height:40px;margin-right:1px;
  17.             margin-top:1px;
  18.     }
  19.     .green{background:green;}
  20.   </style>
  21.   <script src="jquery.min.js" type="text/javascript"></script>
  22.  </head>
  23.  <body>
  24.   <ul id="tp">
  25.     <li class="tps">关于我</li>
  26.     <li class="tps">你好</li>
  27.     <li class="tps">信息</li>
  28.     <li class="tps">服务</li>
  29.     <li class="tps">假期</li>
  30.   </ul>
  31.  
  32.   <div class="container">
  33.     <ul>
  34.         <li class="inner"></li>
  35.         <li class="inner"></li>
  36.         <li class="inner"></li>
  37.         <li class="inner"></li>
  38.         <li class="inner"></li>
  39.         <li class="inner"></li>
  40.         <li class="inner"></li>
  41.         <li class="inner"></li>
  42.         <li class="inner"></li>
  43.         <li class="inner"></li>
  44.         <li class="inner"></li>
  45.         <li class="inner"></li>
  46.         <li class="inner"></li>
  47.         <li class="inner"></li>
  48.         <li class="inner"></li>
  49.         <li class="inner"></li>
  50.     </ul>
  51.  </div>
  52.     <script>
  53.     $(function(){
  54.         function Pointer(x,y){
  55.             this.x = x;
  56.             this.y = y;
  57.         }
  58.         function Position(left,top){
  59.             this.left = left;
  60.             this.top = top;
  61.         }
  62.         $('.tps').each(function(i){
  63.             this.init = function(){
  64.                 $(this).attr('index',i);
  65.  
  66.                 this.drag();
  67.             }
  68.             this.moveback = function(callback){
  69.                 $(this).animate({
  70.                     left:this.pos.left,
  71.                     top:this.pos.top
  72.                 },500)
  73.             }
  74.             this.Check = function(){
  75.                 var currentItem  =  this;
  76.                 var clision = null;
  77.  
  78.                 var position = [];
  79.  
  80.                 $('.inner').each(function(){
  81.  
  82.                     const { top, left } = $(this).offset();
  83.                     position.push({
  84.                         top:top,
  85.                         left:left
  86.                     });
  87.                     $(this).attr('index',i);
  88.                     //index.push($(this).index());
  89.                                             if(    currentItem.pointer.x >$(this).offset().left &&
  90.                                         currentItem.pointer.y > $(this).offset().top &&
  91.                                         (currentItem.pointer.x < $(this).offset().left + $(this).width()) &&
  92.                                         (currentItem.pointer.y < $(this).offset().top + $(this).height())
  93.                                     ){
  94.                                         $(this).after($(currentItem));
  95.                                     }
  96.                 })
  97.                     //console.log(startIndex)
  98.                     //console.log(endIndex)
  99.  
  100.                     console.log(position)
  101.  
  102.             }
  103.             this.add = function(){
  104.  
  105.             }
  106.             this.drag = function(){
  107.                 var oldposition = new Position();
  108.                 var oldpointer = new Pointer();
  109.                 var currentItem  = null;
  110.                 var isDrag = false ;
  111.                 $(this).mousedown(function(e){
  112.                     e.preventDefault();
  113.                     oldposition.left = $(this).offset().left;
  114.                     oldposition.top  = $(this).offset().top;
  115.                     oldpointer.x = e.clientX;
  116.                     oldpointer.y = e.clientY;
  117.                     currentItem = this;
  118.                     isDrag = true;
  119.  
  120.                 })
  121.                 $(document).mousemove(function(e){
  122.                     var currentpointer = new Pointer(e.clientX,e.clientY);
  123.                     if(!isDrag) return false;
  124.                     $(currentItem).css('opacity',0.7);
  125.                     var left = currentpointer.x - oldpointer.x + oldposition.left;
  126.                     var top  = currentpointer.y - oldpointer.y + oldposition.top;
  127.  
  128.                     $(currentItem).css({
  129.                     position:'absolute',
  130.                     left : left,
  131.                     top : top
  132.                     });
  133.  
  134.                     currentItem.pointer = currentpointer;
  135.                 })
  136.                 $(document).mouseup(function(){
  137.                     if(!isDrag) return false;
  138.                     isDrag = false;
  139.                     $(currentItem).css({
  140.                     position:'',
  141.  
  142.                     });
  143.                     /**
  144.                     currentItem.moveback(function(){
  145.                         $(this).css({
  146.                             "opacity" : "1",
  147.                             "z-index" : 0
  148.                         });
  149.                     });
  150.                     **/
  151.                     currentItem.Check();
  152.                 })
  153.  
  154.             }
  155.             this.init();
  156.  
  157.         })
  158.  
  159.     })
  160.  
  161.     </script>
  162.   </div>
  163.  </body>
  164. </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. 【转载】android中.9png

    在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”.这种图片是用于Android开发的一种特殊的图片格式,它的 ...

  2. CSS浮动属性Float介绍

    #cnblogs_post_body h6 {font-size: 16px;font-weight: bold;} 什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中 ...

  3. [译]git init

    git init git init命令用来创建一个新的Git仓储.可以用在一个已经存在的但是没有受Git版本控制的项目,或者用来初始化一个全新的没有任何文件的空仓储.git init通常是你开始一个新 ...

  4. VTK初学一，a_Vertex图形点的绘制

    系统:Win8.1 QT版本:2.4.2,Mingw VTK版本:6.3 2. main.cpp #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #incl ...

  5. POJ 1265 Area

    有一种定理,叫毕克定理....                             Area Time Limit: 1000MS   Memory Limit: 10000K Total Sub ...

  6. POJ 2635 The Embarrassed Cryptographer

    大数取MOD... The Embarrassed Cryptographer Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 1 ...

  7. 素数的线性筛 && 欧拉函数

    O(n) 筛选素数 #include<bits/stdc++.h> using namespace std; const int M = 1e6 + 10 ; int mindiv[M] ...

  8. Linux 信号量大全

    编号 信号名称 缺省动作 说明 1 SIGHUP 终止 终止控制终端或进程 2 SIGINT 终止 键盘产生的中断(Ctrl-C) 3 SIGQUIT dump 键盘产生的退出 4 SIGILL du ...

  9. Hibernate框架之get和load方法的区别

    我们在学习Hibernate框架时,经常会进行修改,删除操作,对于这些操作,我们都应该先加载对象,然后在执行或删除的操作,那么这里Hibernate提供了两种方法按照主键加载对象,也就是我要说的get ...

  10. android 在线升级借助开源中国App源码

    android 在线升级借助开源中国App源码 http://www.cnblogs.com/luomingui/p/3949429.html android 在线升级借助开源中国App源码分析如下: ...