H5 拖动排序 美食排行榜

最新推荐文章于 2024-03-19 20:03:48 发布
最新推荐文章于 2024-03-19 20:03:48 发布
阅读量618 收藏 1
点赞数
分类专栏： H5 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyisonger/article/details/128489742
版权

尝试写一下拖动元素进行排序，真是想到什么去写什么 😂，有的时候很多人老是跟我说，别人都封装好了，你为什么还要自己去实现一下，写的还没别人好。但我总感觉所有都用别人写好的，就放弃思考的机会了。

效果

img

逻辑

通过改变position: absolute;改变每个元素的transform:translate3d来调整悬浮元素位置，使用dom.before(item)和dom.after(item)来修改操作元素插入位置。

难点

无…这个算是个实验品，总感觉上下切换时，没有别人写的丝滑。

源码


<!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>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        h1 {
            margin-top: -20vh;

        }

        .ranking-list {
            display: flex;
            flex-direction: column;
            position: relative;
            align-items: center;
        }

        .ranking-item {
            position: absolute;
            width: 200px;
            padding: 10px 20px;
            transition: transform .5s;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            user-select: none;
            background: #fff;
            z-index: 1;
        }

        .ranking-item.active {
            transition: transform .5s ease-in, background .5s ease-out;
            background-color: #aaa;
            z-index: 0;
            color: #eee;
        }

        .ranking-item.float {
            /* 悬浮元素不需要任何事件 只是方便用户查看当前操作的元素 */
            pointer-events: none;
            position: absolute;
            transform: translate(-50%, -50%);
            background: #fff;
            opacity: .7;
            z-index: 2;
        }

        .delete-area {
            position: absolute;
            right: 20px;
            top: 20vh;
            border: 1px dashed #f13;
            width: 100px;
            height: 100px;
            padding: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f13;
        }

        .form-input {
            margin-bottom: 20px;
        }

        .form-input>input {
            width: 200px;
            padding: 0px 20px;
            height: 40px;
            outline: none;
            border: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>
    <h1>你心目中的美食排行榜</h1>
    <div class="form-input">
        <input type="text" placeholder="请输入您爱吃的美食">
    </div>
    <div class="ranking-list"></div>
    <div class="delete-area">拖至此处删除</div>


    <script>
        // 来源 https://baijiahao.baidu.com/s?id=1726366435512075604&wfr=spider&for=pc
        let rankingList = ['河南胡辣汤', '南京鸭血粉丝汤', '新疆大盘鸡', '西藏酥油茶', '西安肉夹馍', '兰州拉面', '广西螺蛳粉', '河北驴火烧', '延吉冷面']
        let moveItem = null
        let floatItem = null
        let rankingItemDoms = []

        ready();

        function ready() {
            let list = document.querySelector('.ranking-list')
            for (let i = 0; i < rankingList.length; i++) {
                let item = document.createElement('div')
                item.setAttribute('class', 'ranking-item')
                item.setAttribute('style', `transform:translate3d(0px,${i * 41}px,0px)`)
                item.textContent = rankingList[i]
                list.appendChild(item)
                rankingItemDoms.push(item)
            }
            let float = document.createElement('div')
            float.setAttribute('class', 'ranking-item float')
            float.hidden = true
            document.body.appendChild(float)
            floatItem = float;
            list.setAttribute('style', `height:${rankingList.length * 41}px`)
        }
        // 渲染
        function rendering() {
            // 获取最新的dom数据
            rankingItemDoms = document.querySelectorAll('.ranking-list > .ranking-item')
            for (let i = 0; i < rankingItemDoms.length; i++) {
                const rankingItemDom = rankingItemDoms[i];
                rankingItemDom.setAttribute('style', `transform:translate3d(0px,${i * 41}px,0px)`)
            }
        }

        // 更新数据
        function updateData() {
            // 获取最新的dom数据
            rankingItemDoms = document.querySelectorAll('.ranking-list > .ranking-item')
            let result = []
            for (let i = 0; i < rankingItemDoms.length; i++) {
                const rankingItemDom = rankingItemDoms[i];
                result.push(rankingItemDom.textContent)
            }
            rankingList = result;
        }



        // 给输入框增加变更事件
        document.querySelector('.form-input>input').addEventListener('change', (ev) => {
            let list = document.querySelector('.ranking-list')
            let item = document.createElement('div')
            item.setAttribute('class', 'ranking-item')
            item.setAttribute('style', `transform:translate3d(0px,${list.children.length * 41}px,0px)`)
            item.textContent = ev.target.value
            list.appendChild(item)
            ev.target.value = ''
            updateData()
        })

        document.addEventListener("mousedown", (ev) => {
            // 如果点击是条目元素
            if (ev.target.className.includes('ranking-item')) {
                moveItem = ev.target
                moveItem.setAttribute('class', 'ranking-item active')
                floatItem.setAttribute('data-index', moveItem.getAttribute('data-index'))
                floatItem.textContent = moveItem.textContent
                floatItem.setAttribute('style', `left:${ev.clientX}px;top:${ev.clientY}px;`)
                floatItem.hidden = false;
            }
        })
        document.addEventListener("mousemove", (ev) => {
            if (moveItem) {
                // 更新悬浮元素位置
                floatItem.setAttribute('style', `left:${ev.clientX}px;top:${ev.clientY}px;`)
                // 如果点击是条目元素
                if (ev.target.className.includes('ranking-item') && ev.target !== moveItem) {
                    if (ev.offsetY < 20) ev.target.before(moveItem)
                    else ev.target.after(moveItem)
                    rendering()
                    updateData()
                }
            }
        })
        document.addEventListener("mouseup", (ev) => {
            if (moveItem) {
                moveItem.setAttribute('class', 'ranking-item')
                // 当鼠标进入删除区域时
                if (ev.target.className.includes('delete-area')) {
                    moveItem.remove()
                    rendering()
                    updateData()
                }
                moveItem = null
                floatItem.hidden = true
            }
        })


    </script>
</body>

</html>

地址

https://github.com/linyisonger/H5.Examples

林一怂儿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
h5可增加内容和拖拽排序的列表
10-17
h5可增加内容和拖拽排序的列表
html5长按 排序,H5 长按 拖拽排序的实现
weixin_33542634的博客
06-09 398
H5 长按拖拽排序产品需求: H5页面的一个列表,需要长按之后 然后拖拽排序;vuedraggable是vue生态圈中一个知名的组件,也是vue.js项目中处理拖拽问题的不二法宝;它基于Sortable.js打造,因此,其功能之强大,配置之丰富,在这里也毋庸赘言了;由于其供了Sortable.js的所有特性, 所以配置也直接移步Sortable.js文档就可以了具体方法:npm i -S vue...
H5拖拽排序
weixin_37722222的博客
08-09 3997
一、需求 豆果食谱系统，sku列表实现拖拽排序，如图： 二、HTML5拖放API的知识点 首先我们得知道元素怎么才可以被拖放，需要设置它们的draggable属性，其中img和a标签的dragable属性默认是true，不需要我们手动设置。   拖放API的监听事件如下: dragstart: 源对象拖拽开始； drag: 源对象拖拽的过程中； dragend: 源对象拖拽结束；...
h5简单的拖拽排序,
u013571243的专栏
01-17 4845
原本是打算用户移动端的, 但考虑移动端的滑动和滚动(暂不知道也没有去搜索决解方案, 但是就算实现了也会有很多麻烦, 以后再考虑) .drag-containter > div { height: 100px; margin-top: 4px; border: 1px solid #930309; } function drag(ev) { ev.dataTr
H5页面使用插件对li标签进行拖拽排序
qq_31253909的博客
05-24 2241
可随意拖动进行排序
微信小程序代码实现：拖拽排序列表
06-21
利用movable-view， movable-area实现小程序拖拽功能。
移动端列表长按上下拖动排序
10-31
移动端列表长按后，然后可以上下拖动进行排序，主要使用了基于h5 sortTable，然后使用了touch相关事件实现，仅支持移动端,支持安卓和苹果。
React.js组件实现拖拽排序组件功能过程解析
10-15
主要介绍了React.js组件实现拖拽排序组件功能过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
移动端列表长按上下拖动排序（新）
04-12
移动端列表长按后，然后可以上下拖动进行排序，主要使用了基于h5 sortTable，然后使用了touch相关事件实现，仅支持移动端,支持安卓和苹果。
h5固定前三名排行榜
hy3528的博客
11-23 548
h5固定前三名排行榜 <title>公益积分榜</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script> <style> body { backgrou...
html拖拽调图片顺序,关于H5实现微信长按图片拖动调整顺序
weixin_36106852的博客
06-07 1108
当你明白功能的实现逻辑的时候，往往实现的过程中会给你带来惊喜，所以先去明确功能的实现逻辑，剩下的事情会水到渠成比如这个功能，开始的时候我是这样想的，第一张图片的左侧中点作为左侧触发边界点，右侧中点作为右侧触发边界点，当第一张图片的右侧边界点拖动到第二张图片的右半部分时，将第二张图片移动到左边，并交换两张图片的index和位置。当第二张图片的左侧边界点拖动到第一张图片的左半部分时，将第一张图片移动到...
HTML5网页设计基础——美食专题栏目
shengming_tutou的博客
01-22 2592
案例： 图片资源： 参考代码：如下 <!doctype html> <html> <head> <style> img{ margin:20px/*设置图片的四边为20像素*/ } p{ font-size: 20px; /*所有p标签的文字大小设置为20px*/ line-height: 30px; /*行高为30像素*/ text-indent: 2em; /*设置首行缩进为两个字符的空格*/ } .
HTML实现美食菜单
算法与编程之美
11-02 952
1 问题用HBuilder X制作一个美食推荐网页，效果如下：2 方法编写该程序，会用到无序列表（ul标记）和有序列表（ol标记）以及两个标记的交替使用。无序列表的基本语法如下：有序列表的基本语法如下：（3）代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title></...
H5 Canvas实现荣誉证书生成器
林一怂儿
04-24 4659
没人跟我颁奖，那就自己给自己颁一个吧~ 在线链接 https://linyisonger.github.io/H5/22.证书生成器.html 源码地址 https://github.com/linyisonger/H5 功能点 印章绘制 QQ 浏览器 PC 个性化编辑 QQ 浏览器 PC 延迟预览 QQ 浏览器 PC 写法上没有做很多兼容性的处理，大概写了一下逻辑。 效果 代码 <!DOCTYPE html> <html lang="en">.
Layui_LayDate组件限制min和max
林一怂儿
07-19 2317
&amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot; /&amp;amp;gt; &amp;amp;lt;title&amp;amp;g
H5 调用摄像头进行拍照
林一怂儿
04-11 1878
如果人生是一个圆,那么总会有一个人是你最终的切线。 注意: 必须使用https哦~ 功能点 拍照 微信内置浏览器 (iPhone13 Pro) QQ内置浏览器 (小米 Mix3) QQ内置浏览器 (iPhone13 Pro) 自带浏览器 (小米 Mix3) 自带浏览器 (iPhone13 Pro) 保存图片 微信内置浏览器 (iPhone13 Pro) QQ内置浏览器 (小米 Mix3) QQ内置浏览器 (iPhone13 Pro) 自带浏览器 (小米 Mix3) 自带.
H5 雪碧图 移动的机器猫
林一怂儿
12-21 1238
本文中用的就是这张，来自爱给网。键盘上下左右控制移动 动画 通过判断不同状态来展示不同动画 源码 没有进行精简，属于粗略的代码 地址 https://github.com/linyisonger/H5.Examples
Vue el-table 合并单元格
最新发布
林一怂儿
03-19 1122
一般常见的就是下图这种的单列，上下重复进行合并。 有时候可能也会需要多行多列的合并。
H5 获取浏览器内核及版本
林一怂儿
07-19 1106
主要代码 /** * 获取浏览器信息 * @returns {{ name:"Edge"|"Edge(Chromium)"|"Internet Explorer"|"Chrome"|"Safari"|"Firefox"|"unknow",version:""}} */ function BrowserInfo() { let userAgent = self.navigator.userAgent; if (/edge\/([\d\.]+)/i.exec(userAgent)) re
仿h5拖拽
06-01
要实现仿H5拖拽功能，可以使用HTML5中提供的拖拽API来实现。以下是示例代码： HTML： ```html <div id="drag" draggable="true">拖拽我</div> <div id="drop">放置区域</div> ``` JavaScript： ```javascript var drag = document.getElementById("drag"); var drop = document.getElementById("drop"); // 拖拽开始时，保存拖拽元素的信息 drag.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text/plain', '拖拽的数据'); }); // 阻止默认行为，允许拖拽元素被放置到放置区域上 drop.addEventListener('dragover', function(event) { event.preventDefault(); }); // 拖拽元素被放置到放置区域上时，执行相应操作 drop.addEventListener('drop', function(event) { event.preventDefault(); var data = event.dataTransfer.getData('text/plain'); console.log(data); }); ``` 以上代码实现了一个简单的拖拽功能，当用户拖拽`drag`元素时，可以将拖拽的数据保存到`dataTransfer`对象中。当用户将`drag`元素放置到`drop`元素上时，可以获取保存的数据并执行相应操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林一怂儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值