点击按键拖动并重新排序

最新推荐文章于 2024-05-16 21:40:48 发布
最新推荐文章于 2024-05-16 21:40:48 发布
阅读量578 收藏 2
点赞数
分类专栏： 部分常见的效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fxqyilu/article/details/81389252
版权 
小的渣渣，想了很久都没有想明白是不是还有其他办法可以让它自适应，最后只能用boost rap来把这个完成。我一直没有想到拖动是不是有更好的方法，就记得在懒人之家看过这个，所以就直接写下来了。算是给自己的一个学习的例子吧。如果有遇到更好的，我想努力改进！加油！


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任意拖动排序</title>
    <link rel="stylesheet" type="text/css" href="boot/css/bootstrap.css" />
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .item_content {
            width:100%;
            height:100%;
        }
        .item_content .box{
            width:200px;
            height:50px;
            float:left;
            margin:10px
        }
        .item_content .item {
            width:200px;
            height:50px;
            line-height:50px;
            text-align:center;
            cursor:pointer;
            background:#ccc;
            border-radius: 25px;
        }
    </style>
</head>
<body>
<div class="item_content">
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">111</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">122</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">123</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">111</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">122</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">123</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">111</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">111</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">122</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">123</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">111</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">122</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">123</div>
    </div>
    <div class="box col-lg-3 col-md-4 col-sm-6 col-sx-12">
        <div class="item">111</div>
    </div>
</div>
<script src="jquery.min.js"></script>
<script src="boot/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function() {
        //  1.鼠标位置
        function Pointer(x, y) {
            this.x = x ;
            this.y = y ;
        }
        //  2.相对位置
        function Position(left, top) {
            this.left = left ;
            this.top = top ;
        }
        //  3.要拖动div的相应操作
        $(".item_content .item").each(function(i) {
            //  3.1 初始化
            this.init = function() {
                this.box = $(this).parent() ;//要拖动相应div的父元素
                $(this).attr("index", i).css({
                    position : "absolute",
                    left : this.box.offset().left,
                    top : this.box.offset().top
                }).appendTo(".item_content") ;
                this.drag() ;//拖动
            },
            //  3.2 移动
            this.move = function(callback) {
                $(this).stop(true).animate({
                    left : this.box.offset().left,
                    top : this.box.offset().top
                }, 500, function() {
                    if(callback) {
                        callback.call(this) ;
                    }
                }) ;
            },
            //  3.3 不是需要移动的位置则返回到原来的位置上
            this.collisionCheck = function() {
                var currentItem = this ;    //当前的位置
                var direction = null ;      //移动的状态
                $(this).siblings(".item").each(function() {
                    if(
                        currentItem.pointer.x > this.box.offset().left &&
                        currentItem.pointer.y > this.box.offset().top &&
                        (currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
                        (currentItem.pointer.y < this.box.offset().top + this.box.height())
                    ) {
                        // 返回对象和方向
                        if(currentItem.box.offset().top < this.box.offset().top) {
                            direction = "down" ;
                        } else if(currentItem.box.offset().top > this.box.offset().top) {
                            direction = "up" ;
                        } else {
                            direction = "normal" ;
                        }
                        this.swap(currentItem, direction) ;//需要移动则交换位置
                    }
                }) ;
            },
            //    后者div与原来的div交换位置
            this.swap = function(currentItem, direction) {
                var directions = {
                    normal : function() {
                        //记住原始状态
                        var saveBox = this.box ;
                        this.box = currentItem.box ;
                        currentItem.box = saveBox ;
                        this.move() ;
                        $(this).attr("index", this.box.index()) ;
                        $(currentItem).attr("index", currentItem.box.index()) ;
                    },
                    down : function() {
                        var box = this.box ;
                        var node = this ;
                        var startIndex = currentItem.box.index() ;//初始的序号
                        var endIndex = node.box.index();//最后的序号

                        /*如果是将div往后移动，那么前面的div往前移动一个位置*/
                        for(var i = endIndex; i > startIndex ; i--) {
                            var prevNode = $(".item_content .item[index="+ (i - 1) +"]")[0] ;
                            node.box = prevNode.box ;
                            $(node).attr("index", node.box.index()) ;
                            node.move() ;
                            node = prevNode ;
                        }
                        currentItem.box = box ;
                        $(currentItem).attr("index", box.index()) ;
                    },
                    up : function() {

                        var box = this.box ;
                        var node = this ;
                        var startIndex = node.box.index() ;
                        var endIndex = currentItem.box.index();

                        /*如果是将div往前移动，那么后面的div往后移动一个位置*/
                        for(var i = startIndex; i < endIndex; i++) {
                            var nextNode = $(".item_content .item[index="+ (i + 1) +"]")[0] ;
                            node.box = nextNode.box ;
                            $(node).attr("index", node.box.index()) ;
                            node.move() ;
                            node = nextNode ;
                        }
                        currentItem.box = box ;
                        $(currentItem).attr("index", box.index()) ;
                    }
                };
                directions[direction].call(this) ;
            },
            this.drag = function() { // 拖拽
                var oldPosition = new Position() ;
                var oldPointer = new Pointer() ;
                var isDrag = false ;
                var currentItem = null ;
                $(this).mousedown(function(e) {
                    oldPosition.left = $(this).position().left ;
                    oldPosition.top = $(this).position().top ;
                    oldPointer.x = e.clientX ;
                    oldPointer.y = e.clientY ;
                    isDrag = true ; //鼠标跟随
                    currentItem = this ;
                }) ;
                $(document).mousemove(function(e) {
                    var currentPointer = new Pointer(e.clientX, e.clientY) ;
                    if(!isDrag) return false ;//按下左键
                    $(currentItem).css({
                        "opacity" : "0.8",
                        "z-index" : 999
                    }) ;
                    var left = currentPointer.x - oldPointer.x + oldPosition.left ;
                    var top = currentPointer.y - oldPointer.y + oldPosition.top ;
                    $(currentItem).css({
                        left : left,
                        top : top
                    }) ;
                    currentItem.pointer = currentPointer ;

                    // 开始交换位置
                    currentItem.collisionCheck() ;


                }) ;
                $(document).mouseup(function() {
                    if(!isDrag) return false ;//松开左键
                    isDrag = false ;
                    currentItem.move(function() {
                        $(this).css({
                            "opacity" : "1",
                            "z-index" : 0
                        }) ;
                    }) ;
                }) ;
            };
            this.init() ;
        }) ;
    }) ;
</script>
</body>
</html>

 

fxqyilu
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Excel手动排序中“手动”拖拽
weixin_46713695的博客
03-22 3257
手动排序
iOS拖动按钮排序UI效果
IM_Loser的博客
12-15 2826
iOS中按钮拖动排序的UI效果
Web前端最全vue中实现拖拽调整顺序功能，阿里、腾讯大厂Web前端面试必问知识点系统梳理
最新发布
2301_82244330的博客
05-16 465
原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。与vuedraggable相比，awe-dnd没有双向绑定，因此提供了事件，在拖拽结束时用来更新列表 或 去触发父组件监听的事件。，并不是 vue-dragging，这个库的特点是封装了。，在学习的过程可以结合框架的官方文档。
FlowLayoutPanel内用户控件通过上下移动进行顺序调整
热门推荐
luols的专栏
02-10 1万+
我觉得FlowLayoutPanel容器真心是一个很好用的容器，尤其对其里面的控件有位置要求的时候，任意删除其中一个控件，后面的控件会自动上移，这很好的满足了本文所要阐述的需求要点：控制控件的顺序。样图如下： 用户控件源代码： using System; using System.Windows.Forms; namespace Demo { public partial cla
ElementUI：设置table的背景透明、根据表格情况设置背景色、设置文字颜色、文字左右间距、表头
2401_84619986的博客
05-15 442
原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。}else if(row.column.label===“滞后”){if(row.column.label===“正常”){cellStyle(row){//根据情况显示背景色。，在学习的过程可以结合框架的官方文档。
js自由拖拽来排序的功能案例
xiexikk的博客
04-12 7358
在日常项目中，标签的拖拽移动来进行排序的功能还是比较常用的，因最近项目有一个需求 “拖拽菜单进行排序”， 在网上也查了相关案例吧，基于别人的一个拖拽函数；在其基础上进行使用； 我们先来看看需求，如【微信公众号后台——自定义菜单】里面的菜单排序排序的功能； 好的，需求明了~ 开始我的代码编写，编写了一个比较易懂的案例，然后大家可以根据自己的结构进行套用，先看看我的效果： html结构： <...
jQuery自由拖拽图片点击展开特效
06-24
在本文中，我们将深入探讨如何实现“jQuery自由拖拽图片点击展开特效”，这是一种结合了动态交互与信息展示的网页设计技术。首先，我们要理解这个特效的核心功能：允许用户通过鼠标自由拖动页面上的图片，同时当用户...
c# 按键拖动程序
10-29
这个程序允许用户通过鼠标点击并拖动来改变按键的位置，为用户提供更加灵活和个性化的交互体验。下面将详细介绍实现这样一个功能所涉及的关键知识点。 1. **Windows Forms**：C#中的Windows Forms是一个用于构建...
按键精灵命令宝典.rar
03-31
- **动作命令**：包括点击、拖动、移动鼠标、输入文本、读取屏幕等。 - **控制命令**：如等待、暂停、结束脚本等，用于控制脚本的执行流程。 - **变量与逻辑命令**：涉及变量的声明、赋值以及条件判断、循环结构...
左键拽取行进行拖拽排序DragDataGridView.zip
04-29
左侧为WinForm的DataGridView，右侧为WPF的DataGrid。均可以通过左键拽取行进行拖拽排序。原链接为：https://www.cnblogs.com/lichence/archive/2012/02/06/2340351.html。
软件_键盘自定义设置_键盘按键修改_注册表_RemapKey_键盘映射_下载后即可使用
03-09
该软件提供了键盘按键的映射功能，让用户可以根据个人习惯或特殊需求重新排列键盘布局。通过修改注册表，这种改变可以是持久性的，这意味着一旦设置完成，重启电脑后仍然有效。 描述部分进一步阐述了软件的特点和...
jQuery拖动元素并对元素进行重新排序
10-23
主要介绍了jQuery拖动元素并对元素进行重新排序的实现方法，感兴趣的小伙伴们可以参考一下
jQuery对元素进行拖拽并重新排序的案例
quanquan_i的专栏
10-17 1539
jquery对元素进行拖动是一个很实用的功能，转载一个童鞋的案例，分享给大家，学习一下jquery拖拽。   从上图可以看出我们今天要实现的功能。当用户拖动一个图片时，就能改变图片的已有排序并更新表中的排列顺序。比如用户可以随意拖动我们网站中的布局，如谷歌iGoogle就已经实现了。这样便很好的提高了用户体验。 下边，我们一步一步来实现这个功能。
初窥 RAP：如何使用 RAP 进行接口文档管理
bigsec的博客
02-27 1万+
Jason   岂安科技前端研发工程师三年互联网前端开发经验，曾参与过多个系统框架的搭建和组件开发，负责岂安科技产品的数据可视化和公用组件开发。1  前言RAP 是一个可视化接口管理工具， 通过分析接口结构，动态生成模拟数据，校验真实接口正确性， 围绕接口定义，通过一系列自动化工具提升我们的协作效率。在 RAP 中，您可定义接口的 URL、请求和响应细节格式等等。通过分析这些数据，RAP 提供 M...
Vue - 列表拖曳排序 / 鼠标拖动改变顺序排列高效简洁组件（支持PC端与移动端触屏拖动，也可在滚动条内排序自动滚动，流畅丝滑无 BUG）
王佳斌
09-03 4254
Vue - 高效简洁列表拖曳排序 / 鼠标拖动改变顺序排列组件支持PC端与移动端触屏拖动，也可在滚动条内排序自动滚动，流畅丝滑无 BUG列表拖曳排序插件vuedraggable拉动拽动拖动顺序改变排序js,vue.js,nuxt.js列表如何实现鼠标拖曳改变顺序排列支持滚动条内复杂数据对象带拖动效果动画排序完毕自动排列数组位置克隆Vue.Draggable 官方文档教程SortableJS与vuedraggable列表拖动排序Vue拖拽组件库vuedraggable的安装与使用用户用鼠标拖动排序功能源码最好
拖拽RecyclerView的item重新排版
zhengyongbo的博客
06-16 893
记录一下完成RecyclerView的item拖拽功能和完成拖拽之后新的item集合： 引用了框架BaseRecyclerViewAdapterHelper: 记录一下csdn下载地址：http://download.csdn.net/detail/android_zhengyongbo/9872520
按键精灵ocr文字识别 插件
08-22
按键精灵OCR文字识别插件是一款非常实用的工具，通过该插件，用户可以快速精准地将图片中的文字转化为可编辑的文字。该插件支持多种图片格式，包括常见的图片格式如JPEG、PNG等，也支持PDF格式。使用该插件非常简单，只需要将需要识别的图片拖拽到插件的界面上，即可自动进行文字识别。在识别过程中，插件会自动检测图片中的文字，并将其以可编辑的形式展现在用户面前。用户可以直接对识别结果进行编辑，包括删除、修改，也可以将识别结果复制到其他应用程序中使用。 按键精灵OCR文字识别插件的识别准确率较高，能够应对各种文字排列方式和字体样式。无论是手写字、印刷体还是特殊字体，插件都能够进行有效识别，并呈现给用户。同时，插件支持批量识别功能，用户可以一次性将多张图片进行批量处理，大大提高了工作效率。另外，该插件还具备对多语种的支持，能够识别英文、中文等多种语言。 总的来说，按键精灵OCR文字识别插件是一款功能强大、使用简便的文字识别工具，可以帮助用户快速准确地识别图片中的文字，提高工作效率。无论是在日常工作中处理文档，还是学习中需要转化图片资料的情景下，使用该插件都能够带来很大的便利。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值