JavaScript：js实现拖拽移动，删除后自动排列（二）

转x33g5p2x  于2021-12-30 转载在 JavaScript  
字(8.7k)|赞(0)|评价(0)|浏览(348)

js实现拖拽移动，删除后自动排列，是基于《JavaScript：js实现拖拽》的改进。

具体如下：

HTML代码：

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>js实现拖拽移动和删除</title>
<script src="jquery-1.7.min.js"></script>
<script src="Waterfall.js"></script>
<link rel="stylesheet" type="text/css" href="Waterfall.css">
</head>
<body>
<input id="dictType" name="dictType" type="hidden" value="${dictType}"/>
<input id="dictName" name="dictName" type="hidden" value="${dictName}"/>
<div id="falls">
	<div id="id1">
		<span>景观灯<img src='close.png'  onclick="dicDel('id1');"/></span>
		<input name="dictDes" type="hidden" value="景观灯"/>
	</div>
	<div  id="id2">
		<span>灯柱<img src='close.png'  onclick="dicDel('id2');"/></span>
		<input name="dictDes" type="hidden" value="灯柱"/>
	</div>
	<div id="id3">
		<span>壁灯<img src='close.png'  onclick="dicDel('id3');"/></span>
		<input name="dictDes" type="hidden" value="壁灯"/>
	</div>
	<div id="id4">
		<span>灯笼<img src='close.png'  onclick="dicDel('id4');"/></span>
		<input name="dictDes" type="hidden" value="灯笼"/>
	</div>
	<div id="id5">
		<span>吊灯<img src='close.png'  onclick="dicDel('id5');"/></span>
		<input name="dictDes" type="hidden" value="吊灯"/>
	</div>
	
</div>

<script>
    $(function(){
        $("#falls").append("");
        $("#falls").Waterfall({ row: 0, width: 150, speed: 200, margin: 15, delTime: 1500, control: "#falls span" });

    });
    function dicDel(divId){
        document.getElementById(divId).remove();
        var _list = [];
        $("input[name='dictDes']").each(function(i,item){
            _list.push(item.value);
            console.log(i+"数组："+item.id+':'+item.value);
        });

        $("#falls").html("");
        for(var i=0;i<_list.length;i++){
            var timestamp = "id"+(new Date()).valueOf();
            var inputDictDesValue=_list[i];
            var str='<div id="'+timestamp+'"> ';            
            str+='<span>'+inputDictDesValue+'</span><img src="close.png" onclick="dicDel(\''+timestamp+'\');"/>';
			str+='<input name="dictDes" type="hidden" value="'+inputDictDesValue+'"/>';
            str+=' </div>';
            $("#falls").append(str);
		}

        $("#falls").append("");
        $("#falls").Waterfall({ row: 0, width: 150, speed: 200, margin: 15, delTime: 1500, control: "#falls span" });
    }

</script>
</body>
</html>

css

body
{
	background-color:#EEE;
}
#falls
{
margin:0px auto 0px auto;
}
#falls div{
float:left;
width:130px;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
border-bottom:2px solid #CCC;
border-top:1px solid #EEE;
padding:10px;
background-color:#FFF;
}
#falls span
{
    cursor:move;
    padding:5px;
}
#falls span:hover
{
    background-color:#DDD;
}
.clone
{
opacity: 0.8;  
-filter:alpha(opacity=80); /* IE 透明度20% */
-moz-opacity:0.8; /* Moz FF 透明度20%*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*IE8*/
}
#falls img
{
    /*width:200px;*/
    margin:0px;

}

js

(function($) {
    $.fn.Waterfall = function(setting) {
        return this.each(function() {
            var vs = $.browser;
            var defaults = {
                row: 0,
                width: 200,
                margin: 5,
                speed: 200,
                tagName: 'div',
                mark: 'fall',
                delTime: 3000,
                control: "#falls:first-child"
            };
            var topList = [],
                leftList = [],
                settings = $.extend(defaults, setting),
                $Obj = $(this),
                Olist,
                Ol,
                Olength = 0,
                rows,
                Fwidth = settings.width + settings.margin,
                Swidth,
                Mwidth,
                msie;
            var clone, down = false,
                sour, targ, cur = {
                    curX: 0,
                    curY: 0
                },
                sou = {
                    souX: 0,
                    souY: 0
                },
                tag = {
                    tagX: 0,
                    tagY: 0
                },
                i = 0;
            var min, minIndex;
            var init = function() {
                rows = (settings.row == 0) ? Math.floor(($(window).width() - 40) / Fwidth) : settings.row;
                Swidth = Fwidth * rows;
                Lwidth = Fwidth * (rows + 1);
                $Obj.css("width", Swidth)
            };
            var append = function() {
                init();
                Olist = $Obj.children(settings.tagName + "[name!='" + settings.mark + "']");
                Olist.css({
                    "position": "absolute"
                });

                if ($Obj.children(settings.tagName + "[name='" + settings.mark + "']").length > 0) {
                    topList = $Obj.data("List").tL;
                    leftList = $Obj.data("List").lL
                } else {
                    topList.length = 0;
                    leftList.length = 0;
                    $Obj.removeData("List");
                    for (var i = 0; i < rows; i++) {
                        leftList.push(Fwidth * i);
                        topList.push(0)
                    }
                }

            };
            var direction = function(elem) {
                min = Math.min.apply({},
                    topList);
                minIndex = $.inArray(min, topList);
                topList[minIndex] += elem.outerHeight() + settings.margin;
                $Obj.css("height", Math.max.apply({},
                    topList))
            };
            var orient = function() {
                $("#falls div").each(function(){
                    $(this).attr("name", settings.mark);
                })
                var timeout = setTimeout(function() {
                        Olist.each(function() {
                            var Ol = $(this);
                            if (Ol.attr("name") == settings.mark) {
                                direction(Ol);
                                Ol.css({
                                    top: min,
                                    left: leftList[minIndex]
                                }).fadeIn(settings.speed)
                            } else {
                                Ol.remove()
                            }
                        })
                    },
                    settings.delTime);
                $Obj.data("List", {
                    tL: topList,
                    lL: leftList
                })
            };
            var reset = function() {
                init();
                Olist = $Obj.children(settings.tagName + "[name='" + settings.mark + "']");
                topList.length = 0;
                leftList.length = 0;
                for (var i = 0; i < rows; i++) {
                    leftList.push(Fwidth * i);
                    topList.push(0)
                }
                Olist.each(function() {
                    direction($(this));
                    $(this).stop().animate({
                            top: min,
                            left: leftList[minIndex]
                        },
                        settings.speed)
                });
                $Obj.data("List", {
                    tL: topList,
                    lL: leftList
                })
            };
            $(document).ready(function() {
                append();
                orient();
                $(window).unbind("resize").resize(function() {
                    var _w = $(window).width();
                    if (_w < Swidth || _w > Lwidth) {
                        reset()
                    }
                });
                if (true) {
                    $(document).unbind("mousemove mouseup").mousemove(function(event) {
                        if (down) {
                            var eve = event || window.event;
                            clone.show();
                            var xx = (eve.pageX || eve.clientX) - cur.curX;
                            var yy = (eve.pageY || (eve.clientY + document.documentElement.scrollTop)) - cur.curY;
                            clone.css({
                                "top": yy,
                                "left": xx
                            });
                            var scroll = $(document).scrollTop();
                            if (eve.clientY > ($(window).height() - 100) && (document.documentElement.scrollTop + $(window).height()) < $(document).height()) {
                                document.body.scrollTop += 5
                            } else if (eve.clientY < 100) {
                                document.body.scrollTop -= 5
                            }
                        };
                        return false
                    }).mouseup(function() {
                        down = false;
                        try {
                            clone.hide(200)
                        } catch(e) {} finally {
                            setTimeout(function() {
                                    $(".clone").remove()
                                },
                                200)
                        };
                        return false
                    });
                    var listChange = function(_sub) {
                        var _sleft = sou.souX / Fwidth;
                        var _tleft = tag.tagX / Fwidth;
                        topList[_tleft] -= _sub;
                        topList[_sleft] += _sub;
                        $Obj.css("height", Math.max.apply({},
                            topList))
                    };
                    $Obj.unbind("mousedown mouseup").mousedown(function(e) {
                        var event = e || window.event;
                        var elem = $(event.target || event.srcElement);
                        sour = elem.parents(settings.tagName + "[name='" + settings.mark + "']");
                        if (elem.is(settings.control)) {
                            sou.souX = parseInt(sour.css("left"));
                            sou.souY = parseInt(sour.css("top"));
                            cur.curX = (event.pageX || event.clientX) - sou.souX - settings.margin * 2;
                            cur.curY = (event.pageY || (event.clientY + document.body.scrollTop)) - sou.souY - settings.margin * 2 - 10;
                            down = true;
                            try {
                                $(".clone").remove();
                                clone = sour.clone(false, true);
                                clone.attr("name", "clone");
                                clone.addClass("clone");
                                $Obj.append(clone)
                            } catch(e) {
                                $(".clone").remove()
                            }
                        };
                        return false
                    }).mouseup(function(event) {
                        if (down) {
                            var eve = event || window.event;
                            var elem = $(eve.target || eve.srcElement);
                            targ = elem.parents(settings.tagName + "[name='" + settings.mark + "']") || elem;
                            if (targ.is(settings.tagName + "[name='" + settings.mark + "']")) {
                                var current = $Obj.children(":first");
                                var top, t1 = 0;
                                var sub = targ.height() - sour.height();
                                tag.tagX = parseInt(targ.css("left"));
                                tag.tagY = parseInt(targ.css("top"));
                                if (tag.tagY != sou.souY || tag.tagX != sou.souX) {
                                    while (current.length != 0) {
                                        t1 = 0;
                                        top = parseInt(current.css("top"));
                                        if (current.css("left") == sou.souX + "px") {
                                            if (top > sou.souY) {
                                                t1 += sub
                                            }
                                        }
                                        if (current.css("left") == tag.tagX + "px") {
                                            if (top > tag.tagY) {
                                                t1 += -sub
                                            }
                                        }
                                        top += t1;
                                        current.css({
                                            "top": top
                                        });
                                        current = current.next()
                                    }
                                    souX = sour.css("left");
                                    souY = sour.css("top");
                                    tagX = targ.css("left");
                                    tagY = targ.css("top");
                                    listChange(sub);
                                    targ.css({
                                        "top": souY,
                                        "left": souX
                                    });
                                    sour.css({
                                        "top": tagY,
                                        "left": tagX
                                    });
                                    clone.stop().animate({
                                            "top": parseInt(tagY) + 2,
                                            "left": parseInt(tagX) + 2
                                        },
                                        200)
                                }
                            } else {
                                clone.hide(200)
                            }
                            $("#time").val(targ.text());
                            down = false;
                            try {
                                setTimeout(function() {
                                        clone.remove()
                                    },
                                    200)
                            } catch(e) {
                                $(".clone").remove()
                            }
                        }
                        return false
                    })
                }
            })
        })
    }
})(jQuery);

运行效果为：

完整项目基于jquery实现拖拽和删除后自动排序

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://onefire.blog.csdn.net/article/details/122178697

内容来源于网络，如有侵权，请联系作者删除！

技术方案js实现拖拽js拖拽js移动js实现移动js删除后自动排列

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com