javascript实现简单的trello实例

最新推荐文章于 2025-09-07 17:11:01 发布

转载最新推荐文章于 2025-09-07 17:11:01 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000010235211

文章标签：

#javascript #ViewUI

本文介绍了一个基于JavaScript的Trello实例，通过鼠标拖拽实现卡片的移动功能。该实例详细展示了如何根据鼠标的坐标来判断卡片放置的位置，并提供了完整的代码实现。

trello for javascript. 简单的trello实例，用来实现鼠标拖拽停放。

            if(mouse_y > $(".cui_trelloContent ul:eq(" + this_index_lv2 + ")").height()) {
                $(self).attr("style", " "); //使之前动态定义的样式为空，原回到最初的样式
                $(document).unbind();
            } else {
                for(var i = 0; i < $(".cui_trelloContent ul:eq(" + this_index_lv2 + ") li").length; i++) { //遍历列表每一个li,符合条件的就执行
                    current_Top = $(".cui_trelloContent ul:eq(" + this_index_lv2 + ") li:eq(" + i + ")").offset().top; //获取ul2的所有li距离顶部的距离
                    subtraction = $(".cui_trelloContent ul:eq(" + this_index_lv2 + ") li:eq(" + i + ")").attr("affter_top"); //获取鼠标y轴坐标减去li距离顶部距离的值(通过设置属性并获取属性来在不同函数之间传值)
                    current_li_height = $(".cui_trelloContent ul:eq(" + this_index_lv2 + ") li:eq(" + i + ")").height();
                    if(subtraction >= 0 && subtraction <= current_li_height) {
                        $(".cui_trelloContent ul:eq(" + this_index_lv2 + ") li:eq(" + i + ")").before("<li>" + self_html + "</li>");
                        $(self).remove();
                        $(document).unbind(); //移除document的所有绑定事件
                        return
                    }
                }
            }

作者：justjavaz项目的github地址