jqueryui 拖拽

最新推荐文章于 2023-04-07 17:22:39 发布
最新推荐文章于 2023-04-07 17:22:39 发布
阅读量589 收藏
点赞数 1
分类专栏： js 文章标签： jqueryui 拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yu555666/article/details/52143630
版权 
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Simple photo manager</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.10.2.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#gallery { 
		float: left;
		/*width: 65%;*/
		min-height: 12em; 
	}
	.gallery.custom-state-active { background: #eee; }
	.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0.4em; text-align: center; }
	.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
	.gallery li a { float: right; }
	.gallery li a.ui-icon-zoomin { float: left; }
	.gallery li img { width: 100%; cursor: move; }

	.selected {
		border: 1px solid orange;
	}
	
	#trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
	#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
	#trash h4 .ui-icon { float: left; }
	#trash .gallery h5 { display: none; }
	</style>
	<script>
	$(function() {
		// there's the gallery and the trash
		var $gallery = $( "#gallery" ),
			$trash = $( "#trash" );

		// let the gallery items be draggable
		$( "li" ).draggable({
			addClasses: false,
			cancel: "a.ui-icon", // clicking an icon won't initiate dragging
			revert: "invalid", // false
			handle: "img",
			helper: function() {
				$(this).addClass("selected");
				//TODO 別フレームorangeをクリア
				return $("<ul class='ui-helper-reset' style='width: 400px;'/>").append($( "li.selected" ).clone());
			},
			opacity: 0.6,
			cursor: "move",
			delay: 200, // ドラッグを開始するまでの時間をミリ秒で指定します。
			distance: 5, // 指定されたpixelを超えたところまで引きずらないと、ドラッグが開始されないようにします。
		});

		
		
		// let the trash be droppable, accepting the gallery items
		$trash.droppable({
			addClasses: false,
			accept: "ul > li",
			//greedy: true,
			drop: function( event, ui ) {
				deleteImage( ui.draggable );
			},
			tolerance: "pointer", //mouse over
			// over: ぺージンを開始
			// out: ぺージンを取り消し
		});

		
		
		
		
		
		// let the gallery be droppable as well, accepting items from the trash
		$gallery.droppable({
			accept: "ul > li",
			addClasses: false,
			drop: function( event, ui ) {
				recycleImage( ui.draggable );
			},
			tolerance: "pointer", //mouse over
		});

		
		
		
		
		// image deletion function
		var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
		function deleteImage( $item ) {
			$item.fadeOut(function() {
				var $list = $( "ul", $trash ).length ?
					$( "ul", $trash ) :
					$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );

				$item.find( "a.ui-icon-trash" ).remove();
				$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
					$item
						.animate({ width: "48px" })
						.find( "img" )
							.animate({ height: "36px" });
				});
			});
		}

		// image recycle function
		var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
		function recycleImage( $item ) {
			$item.fadeOut(function() {
				$item
					.find( "a.ui-icon-refresh" )
						.remove()
					.end()
					.css( "width", "96px")
					.append( trash_icon )
					.find( "img" )
						.css( "height", "72px" )
					.end()
					.appendTo( $gallery )
					.fadeIn();
			});
		}

		// image preview function, demonstrating the ui.dialog used as a modal window
		function viewLargerImage( $link ) {
			var src = $link.attr( "href" ),
				title = $link.siblings( "img" ).attr( "alt" ),
				$modal = $( "img[src$='" + src + "']" );

			if ( $modal.length ) {
				$modal.dialog( "open" );
			} else {
				var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
					.attr( "src", src ).appendTo( "body" );
				setTimeout(function() {
					img.dialog({
						title: title,
						width: 400,
						modal: true
					});
				}, 1 );
			}
		}

		// resolve the icons behavior with event delegation
		$( "ul.gallery > li" ).click(function( event ) {
			var $item = $( this ),
				$target = $( event.target );

			if ( $target.is( "a.ui-icon-trash" ) ) {
				deleteImage( $item );
			} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
				viewLargerImage( $target );
			} else if ( $target.is( "a.ui-icon-refresh" ) ) {
				recycleImage( $item );
			} else {
				$(this).toggleClass("selected");
			}

			return false;
		});
		
		
		
		
		
	});
	</script>
</head>
<body>
<!-- -->
<div class="ui-widget ui-helper-clearfix"><!-- overflow: hidden, width: 100px; -->

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"><!-- position: absolute -->
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 1</h5>
		<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
		<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>1
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 1</h5>
		<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
		<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>2
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 1</h5>
		<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
		<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>3
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 1</h5>
		<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
		<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>4
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 2</h5>
		<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
		<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>1
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 2</h5>
		<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
		<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>2
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 2</h5>
		<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
		<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>3
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 2</h5>
		<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
		<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>4
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 3</h5>
		<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
		<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>1
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 3</h5>
		<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
		<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>2
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 3</h5>
		<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
		<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>3
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 3</h5>
		<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
		<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>4
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 4</h5>
		<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
		<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>1
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 4</h5>
		<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
		<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>2
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 4</h5>
		<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
		<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>3
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
	<li class="ui-widget-content ui-corner-tr">
		<h5 class="ui-widget-header">High Tatras 4</h5>
		<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
		<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>4
		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
	</li>
</ul>

<div id="trash" class="ui-widget-content ui-state-default">
	<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>

</div>

</body>
</html>

yu555666
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquerytopdroppable是一款非常实用的jQueryUI拖拽拖放插件
08-12
jquery.top-droppable是一款非常实用的jQuery UI拖拽拖放插件。该拖拽拖放插件可以将元素拖动到指定的容器中，如果容器是堆叠的，它还能知道到底是拖放到哪个容器中。
结构-行为-样式-JqueryUI拖放使用实例（全）
ailiwei2014的博客
12-11 159
最近工作中有个需要是动态配置页面，想到之前公司有做过类似的，用的是JqueryUi，所以就看了下它的Api。下面就是我做的小Demo，想用的同学可以参考： Html： <div class="page-component"> <div class="pct-content"> &l...
jquery jqueryUI_拖拽
guoqingru0311的博客
09-14 594
jquery jqueryUI_拖拽1、设置拖拽滑动1、目录结构2、自定义滚动条 1、设置拖拽滑动 1、目录结构 导入相应的 jquery-1.12.4.min.js 文件，目录结构如下： 代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <script type="text
jQuery ui中的拖拽
JasonDante的博客
10-03 191
jQuery ui 的拖拽 在jQuery的拖拽出现之前,在页面上写一个能实现拖拽效果的JS很麻烦,需要监听鼠标的动作,位置等等,代码也比较冗长,而用jQuery ui就会起到事半功倍的效果. 这里介绍一个利用sortable排序列表来实现的拖拽功能. 直接上代码 [code="html"] .placehelperclass{ ...
jQuery实现拖拽
依古比古的博客
06-15 832
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
JQueryUI拖拽效果
01-07
JQueryUI完全实现拖拽效果，兼容IE7以上浏览器；带有演示案例效果，直接查看与引用。
jquery ui拖拽 克隆
06-27
jquery ui拖拽 克隆 可进行退拽功能的复制
jqueryUI里拖拽排序示例分析
10-24
本文主要是通过具体实例分析jQueryUI里拖拽排序问题，十分的实用，这里推荐给小伙伴们。
jQuery UI拖拽到Table表格特效
06-24
jQuery UI拖拽到Table表格特效是一款把想要的信息拖拽到表格里面特效下载。
jQuery UI拖拽拖放插件jquery.top-droppable
12-11
jquery.top-droppable是一款非常实用的jQuery UI拖拽拖放插件。该拖拽拖放插件可以将元素拖动到指定的容器中，如果容器是堆叠的，它还能知道到底是拖放到哪个容器中。
jQuery-UI拖拽特效
qq_33840688的博客
07-21 250
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery-ui.js"></s.
jquery UI 实例——拖拽（Draggable）
QQ873963142的博客
03-11 4185
默认功能 在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。 lang="en"> charset="utf-8"> jQuery UI 拖动（Draggable） - 默认功能 rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoo
jQuery-拖动层(在可视区域范围内)
05-24 192
(function($){ $.fn.extend({ mydrag:function(){ var boxX = 0; //元素在页面中的横坐标 var boxY = 0; //元素在页面中的纵坐标 ...
jquery实现在一定范围拖拽小窗口，并拖到固定区域触发事件
web小袋鼠
08-06 993
先上效果图 一个小小的需求案例，技术栈 jq，一个看似简单的效果，涉及到鼠标事件以及元素坐标等知识点，其实拖拽的实现原理很简单就是利用元素绝对定位实现的拖拽position: absolute。 封装拖拽（开箱即用） $.fn.extend({ dragging: function(data) { var $this = $(this); var xPage; var yPage; ...
利用jquery ui 实现拖拽
gong1422425666的博客
05-23 457
github演示 ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } li { margin: 5px; padding
JqueryUI拖拽——“拖”API
李赛赛的专栏
04-06 1756
   1 $( ".selector" ).draggable({ addClasses: false }); 在组件初始化之后，读取或设置addClasses选项 1 2 3 4 5 6 // getter var addClasses = $( ".selector" ).dra
jQuery UI 实例 - 放置（Droppable）
unber的博客
04-07 243
为可拖拽小部件创建目标。如需了解更多有关 droppable 交互的细节，请查看 API 文档。
jquery ui（二）draggable,droppable
dearkerwin的专栏
05-24 1699
刚接触的时候，分不清draggable和droppable的区别，瞎弄了一会，其实很简单，draggable就是“拖”的功能，droppable就是“放”的功能。 一、先上一个简单例子 1、代码 script src="http://code.jquery.com/jquery-1.9.1.js">/script> script src="http://code.jquer
jquery UI购物车
最新发布
05-16
jQuery UI是一个jQuery的UI库，其中包含了很多UI组件，如按钮、对话框、日期选择器、拖拽排序等等。购物车作为电子商务网站的常见功能之一，jQuery UI也提供了相关组件来实现购物车的功能。 在jQuery UI中，实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值