前端点击div上下移动排序

最新推荐文章于 2022-04-02 15:27:18 发布
最新推荐文章于 2022-04-02 15:27:18 发布
阅读量722 收藏 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>
正一品程序员
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div上下循环移动
gouhuarong的博客
07-23 1360
(function() { //向下移动 var divContainer = document.getElementById('container'); var listOfDiv = divContainer.getElementsByTagName('div'); for(var i = 0; i < listOfDiv.length; ++i) {
DIV上下移动
03-19
源码 博文链接：https://helly2115.iteye.com/blog/734165
前端实现列表排序 (时间 名称 升序 降序)
张一西的博客
10-30 5020
function pcompare(prop,rev) { // 第二个参数没有传递，默认升序排序 if(rev === undefined) { rev = 1; }else { rev = rev ? 1: -1; } return function(obj1,obj2) { // 方括号.
flowlayout布局怎么换行_前端布局篇
weixin_39968592的博客
11-21 1024
前端布局css盒模型css 盒模型是理解css的基础，和css布局关系密切，理解好盒模型能帮助我们更好的掌握css其他样式及元素的布局盒模型换而言之就是把每个元素抽象成一个个矩形盒子，每个盒子有以下两个特点盒子里面可以放内容，这个内容既可以是文本，也可以是其他元素标签（特殊元素除外）盒子不仅可以嵌套，也可以水平垂直排列那么我们怎么理解盒模型呢，下面为chrome浏览器开发者工具的截图可以看到，盒模...
Jquery实现Div上下移动示例
10-26
主要介绍了Jquery如何实现Div上下移动,需要的朋友可以参考下
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的移动代码
03-01
js,htmldiv如何实现动画
javascript实现鼠标点击页面 移动DIV
10-20
本篇文章主要介绍javascript实现鼠标点击页面，移动DIV。话不多说，附上代码实例。需要的朋友来看下吧
vue 前端处理列表 上下移动 操作
Yoga99的博客
09-23 1325
第一条不可上移，最后一条不可下移 <el-table-column label="操作" width="150"> <template slot-scope="scope"> <span @click="handleCellEdit(scope.row, scope.$index)" class="ce.
DIV层上下移动
06-21
DIV层上下移动
jquery实现div上下移动
05-05
jquery实现div上下移动 上移 下移 内容一 上移 下移 内容二
jQuery鼠标上下拖动div排序代码
06-10
jQuery鼠标上下拖动div排序代码、鼠标拖动层改变排列顺序，div左上角还有按钮操作，点击只是弹窗提示效果。
前端表单上下移动接口实现
如漩涡的博客
01-25 1577
要求：项目中遇到前端页面读取完数据后，需要对排序进行上下移动 思路：让前端传入两个参数，一个是状态，0前进，1后退，再把当前的sort值发送到后台，后台根据当前的状态值，判断前进还是后退；根据传入的sort去查找当前这条记录，对sort进行+1或者-1的更新操作，再把数据通过 ORDER BY 函数进行排序发送给前端页面 实现：    据传入的sort去查找当前这条记录，对s
div拖动并且排序
管子（zero）的杂乱空间
12-05 2360
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
前端写排序功能 和遇到的坑
Liu_JiaqiPro的博客
03-23 1612
前端排序实战
java上下左右键盘控制_键盘控制div上下左右移动 (转)
weixin_39943383的博客
02-24 765
$(function(){$(document).keydown(function (event) {var keyCode = event.keyCode;var space = 20;var div = $('#div');switch(keyCode){case 37: div.offset({left:(div.offset().left - 20)}); break;case 38: d...
div上、中、下布局，鼠标移入移出显示滚动条
LJ_759482的博客
04-02 343
<div className={styles.container_box}> <div style={{background:'green'}} className={styles.head_box}></div> <div className={styles.main_box}> <div style={{height:'500px'}}></div> </div> <div style={{backg.
js上移、下移排序 效果
weixin_34348805的博客
04-22 158
<script type="text/javascript"><!-- google_ad_client = "pub-0849827290095392"; /* 728x90, 创建于 09-3-19 */ google_ad_slot = "6829013231"; google_ad_width = 728; google_ad_height = 90; /...
前端html使div上下居中
最新发布
07-27
要使div在前端html中上下居中，有多种方法可以实现。其中一种方法是使用CSS3的弹性布局(flex)。可以通过设置父元素的display属性为flex，然后使用align-items属性将子元素垂直居中。以下是一个示例代码： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值