JavaScript：js实现拖拽

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

html代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
    <style type="text/css">
    body
    {
        background-color:#EEE;
    }
    .content
    {
        top:45px;
        position:relative;
overflow:hidden;
    }
#falls
{
position:relative;
margin:0px auto 0px auto;
}
#falls div{
width:130px;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
border-bottom:2px solid #CCC;
border-top:1px solid #EEE;
position:absolute;
padding:10px;
top:45px;
left:-600px;
display:none;
background-color:#FFF;
}
#falls span
{
    display:block;
    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;

}
</style>
</head>
<body>
<div class="content">
<div id="falls">
	<div><span>图片一图片一<img src='close.png'/></span></div>
	<div><span>图片一图片二<img src='close.png'/></span></div>
	<div><span>图片一图片三<img src='close.png'/></span></div>
	<div><span>图片一图片四<img src='close.png'/></span></div>
	<div><span>图片五<img src='close.png'/></span></div>
	<div><span>图片六<img src='close.png'/></span></div>
	<div><span>图片七<img src='close.png'/></span></div>
	<div><span>图片八<img src='close.png'/></span></div>
</div>
<div id="loading"></div>
</div>

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

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() {
				
				Olist.find("img").bind("load",
				function() {
					Ol = $(this).parents("#falls>" + settings.tagName);
					Ol.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 (! ($.browser.msie && $.browser.version == "6.0")) {
					$(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/122073267

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

其他js实现拖拽js拖拽实现拖拽

相关文章

    查看更多

    热门标签

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

    最新文章

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