排序演示

最新推荐文章于 2021-12-10 10:11:43 发布
最新推荐文章于 2021-12-10 10:11:43 发布
阅读量148 收藏
点赞数
分类专栏： js 文章标签： js 排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43031907/article/details/82562701
版权

只需添加一个Jquery文件就可以使用了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            margin: 0; padding: 0;
        }
        html,body{width: 100%; height: 100%; overflow: hidden;}

        .main{
            width: 900px;
            height: 80px;
            margin: 50px auto;
        }
        .main ul{
            list-style: none;
        }
        .normal {
            display: inline-block;
            width: 100px; height: 120px;
            border-radius: 6px;
            margin-left: 5px;
            background: darkcyan;
            color: yellow; font-size: 30px;
            font-family: "微软雅黑";
            text-align: center; line-height: 120px;
        }
        .dragele {
            list-style: none;
            position: absolute;
            width: 100px; height: 120px;
            border-radius: 6px;
            border: 1px dashed black;
            background: rgba(0,0,0,0.5);
            color: yellow; font-size: 30px;
            font-family: "微软雅黑";
            text-align: center; line-height: 120px;
        }
        .info{
            width: 900px;
            height: 300px;
            line-height: 300px;
            font-size: 40px;
            font-family: "微软雅黑";
            font-weight: bold;
            text-align: center;
            color: grey;
            margin: 30px auto;

        }
    </style>
    <script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <div class="main">
            <ul>
                <li class="normal">15</li>
                <li class="normal">6</li>
                <li class="normal">18</li>
                <li class="normal">56</li>
                <li class="normal">3</li>
                <li class="normal">22</li>
                <li class="normal">52</li>
                <li class="normal">13</li>
            </ul>
        </div>
        <div class="info">

        </div>
    </body>
    <script type="text/javascript">
                var that;//保存点击的Dom元素
                var $li = null;//新生成可拖拽的Dom元素
                var mousepos;//鼠标在点击元素的相对位置
                var downindex;//点击的dom元素在ul中的索引值
                var targetindex;//目标dom元素在ul中的索引值
                var swapable;//是否可以交换
                //鼠标点击事件
                $(".normal").on("mousedown",function(e){
                    that = $(this);
                    $li = $("<li>");//新生成一个li元素
                    $li.addClass("dragele");//添加dragele类
                    downindex = $(".normal").index($(this));//记录索引值
                    $li.css({left:$(this).offset().left,top:$(this).offset().top,position:"absolute"})//初始位置
                    $li.text($(this).text());//给$li添加点击dom元素的文本
                    $(document.documentElement).append($li);//将$li添加到html中
                    mousepos = {
                        x : e.offsetX,
                        y : e.offsetY
                    };
                    $(document).on("mousemove",move);//绑定移动事件
                })
                //绑定鼠标松开事件
                $(document).on("mouseup",function(e){
                    $(document).off("mousemove",move);//清除鼠标移动事件
                    if($li == null)return;//如果$li是空，结束函数
                    $li.remove();//清除$li
                    if(swapable){//如果为true,则可以交换
                        var $copydown = that.clone();//copy点击的dom元素
                        //初始位置
                        $copydown.css({position:"absolute",left:that.offset().left-5,top:that.offset().top});
                        var $copytarget = $(".normal").eq(targetindex).clone();//copy目标元素
                        //初始位置
                        $copytarget.css({position:"absolute",left: $(".normal").eq(targetindex).offset().left-5,top: $(".normal").eq(targetindex).offset().top});
                        //改变背景
                        that.css({background : "white"});
                        $(".normal").eq(targetindex).css({background : "white"})
                        //将其添加到html中
                        $(document.documentElement).append($copydown);
                        $(document.documentElement).append($copytarget);
                        var num = that.text();
                        $(".info").text("交换中...")
                        $copydown.animate({left :$(".normal").eq(targetindex).offset().left-5},2000,function(){
                            that.css({background :"darkcyan"}).text($(".normal").eq(targetindex).text());
                            $copydown.remove();
                            $(".info").text("交换完毕");
                            setTimeout(() => {
                                $(".info").text("");
                            }, 1000);
                        })
                        $copytarget.animate({left :that.offset().left-5},2000,function(){
                            $(".normal").eq(targetindex).css({background :"darkcyan"}).text(num);
                            $copytarget.remove();
                            //重置
                            that = null;
                            mousepos = null;
                            downindex = null;
                            targetindex = null;
                        })
                    }

                })
                //鼠标移动要执行的函数
                function move(e){
                    var mopos = {
                        x : e.pageX -mousepos.x,
                        y : e.pageY - mousepos.y,
                    } 
                    $li.css({left : mopos.x ,top: mopos.y});//$li移动
                    //找出距离最短
                    var minDis = distance($li, $(".normal").eq(0));
                    targetindex = 0;
                    $(".normal").each(function(index){
                        if(distance($li,$(this)) < minDis) {
                            minDis = distance($li,$(this));
                            targetindex = index;
                        }
                    });
                    if(minDis < 10 && Number($li.text())>Number($(".normal").eq(targetindex).text()) ) {
                        $li.css({"background":"forestgreen","color":"black"});
                        swapable = true;
                        $(".info").text("允许交换");
                    } else {
                        $li.css({background: "rgba(0,0,0,0.5)", color:"yellow"});
                        swapable = false;
                        $(".info").text("");
                    }
                }
                //计算距离函数
                function distance(obj1,obj2){
                    return Math.sqrt( Math.pow(obj1.offset().left-obj2.offset().left,2) + Math.pow(obj1.offset().top-obj2.offset().top,2));
                }
    </script>
</html>
早睡早起学全栈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
排序算法动态演示
08-12
对冒泡排序法和选择排序法的一个动态演示课件，介绍了两法排序的基本算法
排序演示软件.rar
05-29
窗口化展示各种排序过程，可以自己设置排序数量，排序方式，演示模式，文本颜色，已排序元素颜色，交换元素颜色。包含交换排序算法，选择排序算法，插入排序算法，冒泡排序算法。打开文件夹下的obj下的Debug中的SortDemo.exe
十大经典排序算法(动态演示+代码)
weixin_44747933的博客
05-20 1989
以前也零零碎碎发过一些排序算法，但排版都不太好，又重新整理一次，排序算法是数据结构的重要部分，系统地学习很有必要。时间、空间复杂度比较 排序算法平均时间复杂度最差时间复杂度空间复杂度数据...
js排序演示
aiyi2516的博客
02-03 77
本来想写个js的排序演示 但是js是异步的编程 即使用settimeout也很难控制多个动画的运行顺序 希望有人给我的程序做补充 <input type="text" name="amount" id="amount" /><input type="button" value="确定" id="ofcourse" /><input type="butt...
七大经典排序算法(动图演示+代码展示)
weixin_43224539的博客
04-21 3405
常见排序算法可以分为两大类：非线性时间比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此称为非线性时间比较类排序。线性时间非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此称为线性时间非比较类排序。 算法复杂度 1. 冒泡排序(BubbleSort) 冒泡排序是一种简单的排序算法，是...
Windows程序设计实验 多文档排序演示
01-31
按“手动”菜单演示数组数据排序的移动过程，按“暂停”菜单结束排序演示过程。 在客户区正确显示当前数组数据的移动过程。点击“手动演示”菜单一步一步查看过程。点击“自动”实现自动演示（每次移动间隔1s）。 在...
快速排序的基本思想、排序流程和排序演示
最新发布
01-15
快速排序的基本思想、排序流程和排序演示 快速排序是一种 Divide and Conquer 的排序算法，它的基本思想是通过选择一个基准元素（pivot），将待排序的序列分成两部分，然后递归地对这两部分进行排序，直到整个序列...
java排序演示代码
11-26
本文将深入探讨在Java中实现几种基本排序算法，并通过标签“排序演示”了解如何用代码进行动态展示。 首先，我们来看插入排序（Insertion Sort）。插入排序是一种简单直观的排序算法，它的工作原理是通过构造一个...
各种内部排序演示
05-26
本资源"各种内部排序演示"提供了对八种经典内部排序算法的可视化展示，包括泡沫排序、堆排序、插入排序、归并排序、快速排序、基数排序、选择排序和希尔排序。通过这些.swf文件，学习者可以直观地理解每种排序算法的...
常见八大排序（C语言实现）及动图演示
qq_43041053的博客
11-25 1792
0.简介 排序：所谓排序，就是使一串记录，按照其中的某个或某些关键字的大小，递增或递减的排列起来的操作。 稳定性：假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序，这些记录的相对次序保持不变，即在原序列中，r[i]=r[j]，且r[i]在r[j]之前，而在排序后的序列中，r[i]仍在r[j]之前，则称这种排序算法是稳定的；否则称为不稳定的。 内部排序：数据元素全部放在内存中的排序。 外部排序：数据元素太多不能同时放在内存中，根据排序过程的要求不能在内外存之间移动数据的排序。
排序算法过程演示程序源码
10-11
以前帮别人写的一个课程设计，里面提供了四种常用排序算法：冒泡排序、选择排序、插入排序、交换排序。 由于是动画演示，可以清楚看到各种不同排序的比较、交换的过程。 本代码供VS2013以后的环境使用，因为代码中用到了yield。
七种排序算法动态演示软件
06-06
七种排序算法（插入、选择、冒泡、归并、希尔、快速、桶）演示软件，支持手动输入数据执行演示。
基于多目标粒子群优化MOPOS算法,动态显示优化过程,同时将优化结果和pareto边界进行对比+含代码操作演示视频
05-13
基于多目标粒子群优化MOPOS算法,动态显示优化过程,同时将优化结果和pareto边界进行对比+含代码操作演示视频 运行注意事项：使用matlab2021a或者更高版本测试，运行里面的Runme.m文件，不要直接运行子函数文件。运行时注意matlab左侧的当前文件夹窗口必须是当前工程所在路径。具体可观看提供的操作录像视频跟着操作。
多目标粒子群优化算法mopos
06-29
多目标粒子群优化算法的C++程序 包括优化算法和适应度函数
mopos-DG.rar_DG多目标_分布式_多目标DG_粒子群 分布式_选址 matlab
07-14
多目标粒子群算法优化分布式发电选址 实现了最优目标
十大经典排序算法（动图演示）
qq_45768871的博客
02-01 1514
十大经典排序算法（动图演示） 十种常见排序算法可以分为两大类： 比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。 非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时间非比较类排序。 0.3 相关概念 稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面。 不稳定：如果a原本在b的前面，而a=b，排序之后 a 可能会出现在 b 的后面。 时间复杂度：对排序数据的总
视频: 6分钟演示15种排序算法
liuhhaiffeng的专栏
10-16 1209
视频: 6分钟演示15种排序算法
十大经典排序算法(动画演示)
weixin_42526326的博客
12-10 1436
设计模式 一、单一职责原则 就一个类而言，应该仅有一个引起它变化的原因。 如果一个类承担的职责过多，就等于把这些职责耦合在一起，一个职责的变化可能会削弱或者抑制这个类完成其他职责的能力。这种耦合会导致脆弱他的设计，当变化发生时，设计会遭受到意想不到的破坏；软件设计真正要做的许多内容就是发现职责并把那些职责相互分离。 二、开放-封闭原则 软件实体应该可以扩展，但不可修改。该原则是面向对象设计的核心所在，遵循这个原则可以带来面向对象技术所声称的可维护、可扩展、可复用、灵活性好。 设计人员必须对于他设计的模块应该
鼠标控制物体移动
LLLZZZSSS9770的博客
08-12 175
1.物体移动到鼠标点击处 2.物体跟随鼠标移动 分为三步：获取鼠标位置、转化为世界坐标、物体移动 privateVector3mopos; privateVector3gamepos; voidStart(){ //物体的世界坐标转化成屏幕坐标 //gamepos=Camera.main.WorldToScreenPoint(transform...
课程设计排序演示程序
08-25
对于排序演示程序的课程设计，我可以给您一些思路和指导。 首先，您可以选择一个或多个常见的排序算法，例如冒泡排序、插入排序、选择排序、快速排序等等。这些算法都是基础且易于理解的排序算法，非常适合用来进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值