前端点击div上下移动排序

最新推荐文章于 2024-10-29 10:01:20 发布
最新推荐文章于 2024-10-29 10:01:20 发布
阅读量764 收藏 2
点赞数
文章标签： html css javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46060121/article/details/116647571
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./toolkit/jQuery-min.js"></script>
  <style>
    div{
      cursor:pointer;
    }
  </style>
</head>

<body>
  <div>
    <div class="item" style="background-color: pink; text-align: center">
      <div style="display: flex;">
        <div class="sort-down">下移</div>
        <div class="sort-asc">上移</div>
      </div>
      <div>内容11111</div>
    </div>
    <div class="item" style="background-color: burlywood; text-align: center">
      <div style="display: flex;">
        <div class="sort-down">下移</div>
        <div class="sort-asc">上移</div>
      </div>
      <div>内容22222</div>
    </div>
    <div class="item" style="background-color: yellow; text-align: center;">
      <div style="display: flex;">
        <div class="sort-down">下移</div>
        <div class="sort-asc">上移</div>
      </div>
      <div>内容33333</div>
    </div>
  </div>

  <ul class="demo">
    <li>
      <span>001</span>
      <a href="javascript:void(0)" class="up">上移</a>
      <a href="javascript:void(0)" class="down">下移</a>
      <a href="javascript:void(0)" class="top">置顶</a>
      <a href="javascript:void(0)" class="bottom">置底</a>
    </li>
    <li>
      <span>002</span>
      <a href="javascript:void(0)" class="up">上移</a>
      <a href="javascript:void(0)" class="down">下移</a>
      <a href="javascript:void(0)" class="top">置顶</a>
      <a href="javascript:void(0)" class="bottom">置底</a>
    </li>
    <li>
      <span>003</span>
      <a href="javascript:void(0)" class="up">上移</a>
      <a href="javascript:void(0)" class="down">下移</a>
      <a href="javascript:void(0)" class="top">置顶</a>
      <a href="javascript:void(0)" class="bottom">置底</a>
    </li>
    <li>
      <span>004</span>
      <a href="javascript:void(0)" class="up">上移</a>
      <a href="javascript:void(0)" class="down">下移</a>
      <a href="javascript:void(0)" class="top">置顶</a>
      <a href="javascript:void(0)" class="bottom">置底</a>
    </li>
  </ul>
</body>
<script>
  $(document).on('click', '.sort-down', function () {
    //判断是否有下一个节点
    if ($(this).parents('.item').nextAll().length > 0) {
      $(this).parents('.item').next().after(
        $(this).parents('.item').prop('outerHTML'));
      $(this).parents('.item').remove();
    }
  }).on('click', '.sort-asc', function () {
    //判断是否有上一个节点
    if ($(this).parents('.item').prevAll().length > 0) {
      $(this).parents('.item').prev().before(
        $(this).parents('.item').prop('outerHTML'));
      $(this).parents('.item').remove();
    }
  })

  $(".demo").on('click', 'a', function (event) {
    event.preventDefault;
    var parent = $(this).parent();
    var parents = $(this).parents(".demo");
    var len = parents.children().length;

    if (($(this).is(".up") || $(this).is(".top")) && parent.index() == 0) {
      alert("已经位于最顶端！");
      return false;
    } else if (($(this).is(".down") || $(this).is(".bottom")) && parent.index() == len - 1) {
      alert("已经位于最底端！");
      return false;
    }

    switch (true) {
      case $(this).is(".up"):
        var prev = parent.prev();
        parent.insertBefore(prev);
        break;
      case $(this).is(".down"):
        var next = parent.next();
        parent.insertAfter(next);
        break;
      case $(this).is(".top"):
        parents.prepend(parent);
        break;
      case $(this).is(".bottom"):
        parents.append(parent);
        break;
    }
  });
</script>

</html>
正一品程序员
关注
Vue实现点击箭头上下移动效果
12-28
<body> <div id=app> (item,i)>{{item.name}} //i(i)>↓</button> <button v-show=i>0 @click=up(i)>↑</button> </div> <script sr
div上下循环移动
gouhuarong的博客
07-23 1387
(function() { //向下移动 var divContainer = document.getElementById('container'); var listOfDiv = divContainer.getElementsByTagName('div'); for(var i = 0; i < listOfDiv.length; ++i) {
div拖动并且排序
管子（zero）的杂乱空间
12-05 2407
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
前端js实现上下移动
m0_46120422的博客
02-20 558
【代码】前端js实现上下移动。
移动端列表长按后上下拖动进行排序
qq_20565303的专栏
10-11 1万+
简述：移动端列表长按后，然后可以上下拖动进行排序，主要使用了基于h5 sortTable，然后使用了touch相关事件实现，仅支持移动端。效果图：长按下后拖动过程中的效果，如果不长按，只能上下滑动：代码实现解析：首先看html的代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; ...
css如何让两个div上下排列_如何讲清楚Flex弹性盒模型？(上)
热门推荐
weixin_39600331的博客
11-21 3万+
一、什么是Flex弹性盒？Flex弹性盒，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当一个元素 display:flex 的时候，内部元素float会失效，vertical-align也会失效因此我们至少能确定一点，flex替代了浮动的解决方案。我们来看一下它的基本特点。在flex容器当中，div这样的块元素不再独占一行而是自动排成一行。这个效果虽然和浮动很像, 但是请记住, 在fle...
jquery div拖动排序效果特效代码
03-20
当`mousedown`事件触发时，记录下当前被点击的div元素（通常称为拖动元素）以及它的初始位置。然后，`mousemove`事件处理函数会持续更新拖动元素的位置，跟随鼠标的移动。为了实现元素间的排序，还需要监听整个容器...
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
10-27
拖拽排序功能则可能需要更为复杂的逻辑，包括但不限于保存每个DIV的初始位置、计算鼠标移动距离、交换DIV的位置等。 最后，该实现代码示例中提到的每个 DIV 内部的表格结构，虽然对于本文的目的不是核心点，但提供...
easyUI点击按钮后上下移动功能
11-15
本篇将详细介绍如何在 EasyUI 中实现点击按钮后，Datagrid 中的数据行上下移动功能。 首先，我们来看 `show.html` 文件的实现方式。在 `show.html` 中，通常会包含一个 Datagrid 和两个按钮，一个用于上移，一个...
模仿360首页导航Div排序插件
07-13
通过学习和应用这个“模仿360首页导航Div排序插件”，开发者不仅可以掌握jQuery实现拖放排序的技术，还能深入理解前端交互设计和用户体验优化的重要性。同时，这也是对JavaScript面向对象编程、事件驱动模型和DOM...
vue 前端处理列表 上下移动 操作
Yoga99的博客
09-23 1402
第一条不可上移，最后一条不可下移 <el-table-column label="操作" width="150"> <template slot-scope="scope"> <span @click="handleCellEdit(scope.row, scope.$index)" class="ce.
vue 对div进行拖动，并改变元素位置、顺序
wcdunf的博客
05-03 1425
vue 对div进行拖动，并改变元素位置、顺序。
js 实现列表的上下排序功能
weixin_45786785的博客
12-16 704
首先 先编写2个div 未排序办件列表： 序号 文件标题 操作 NUMBER SUP_TITLE 移动到右边 上移 下移 已排序办件列表： 操作 文件标题 序号 移动到左边 SUP_TITLE NUMBER ...
(期末复习)html元素上下左右置中对齐的三种方法
Xmumu_的博客
01-04 1万+
冲 左右置中方法 设置元素对齐方式，首先先看看它的display属性： display:inline/inline-block 将父容器设定为text-align:center，就可左右置中 display:block 将元素本身的margin-left和margin-right都设定为auto，就可以左右置中 上下置中就没那么容易啦，下面介绍3种方法 上下居中 1、设置元素的position为absolute 然后设置其top和left都为50%，这个时候就是将元素左上角的位置居中在页面中间，如果想
前端写排序功能 和遇到的坑
Liu_JiaqiPro的博客
03-23 1674
前端排序实战
上移下移实现逻辑
wuguofei12345的博客
08-06 2616
在开发中经常有上移、下移的操作，猛的一想感觉逻辑还很复杂，其实很简单主要有以下步骤： 首先页面上的展示列表在后台查询的时候要根据某个字段排序，这样展示的数据才是有序的，才可以实现此功能。 添加上移或者下移的时候需要把当前数据的ID和目标ID传到后台 后台排序的字段互换值，到前台后需要重新加载列表。 前台代码： $.each(json, function(index, item) { ...
前端实现列表排序 (时间 名称 升序 降序)
张一西的博客
10-30 5170
function pcompare(prop,rev) { // 第二个参数没有传递，默认升序排序 if(rev === undefined) { rev = 1; }else { rev = rev ? 1: -1; } return function(obj1,obj2) { // 方括号.
HTML入门教程8：HTML格式化
最新发布
软考鸭
10-29 416
通过遵循这些HTML格式化的实践和建议，你可以创建出结构清晰、易于阅读和美观的网页。随着你对HTML和CSS的掌握程度的提高，你还可以进一步探索更高级的格式化技巧和布局方法。推荐使用外部样式表，因为它可以将样式与内容分离，提高代码的可维护性和重用性。CSS是HTML格式化的强大工具，它允许你精确地控制网页元素的布局、颜色、字体、间距等。HTML标签不仅用于定义网页的结构和内容，还可以通过其属性和样式来影响内容的显示方式。标签来创建不同级别的标题，这有助于建立内容的层次结构，并使网页更加易于导航和理解。
深入理解冒泡排序法：算法原理与步骤解析
资源摘要信息:"冒泡排序法是一种简单的排序算法，它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序...标签中的“atmospherefpg cssdiv竖着排序”可能是关于在特定前端技术栈中实现类似排序效果的描述。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值