您的位置：首页 > Web前端 > JQuery

jqueryUI的拖动说明

2015-06-11 17:33 671 查看
jqueryUI是一套UI框架，官方说明：jQuery UI is a curated set of user interface interactions,effects, widgets, and themes built on top of the jQuery JavaScript Library.Whether you're building highly interactive web applications or you justneed to add a date picker
to a form control, jQuery UI is the perfectchoice.

翻译成中文就是：jQuery UI是一个策划组的用户界面的相互作用，影响，部件，和内置的jQuery JavaScript库的主题。无论你是建筑高度交互的Web应用程序或你只需要添加一个日期选择器控件，jQuery UI是最完美的选择。

整体分为：

1.交互

2.实用的小控件

3.效果

4.实用小工具

最近做项目要做到一个小挂件的功能，于是想到jquertUI拖动的交互不错，在此说明如下：

在Interactions中：

Draggable：表示拖动的意思

Droppable：表示被放置的意思(拖动的元素放置在上面)。

重点是Draggable，官方给出的API说明如下：



API分类说明如下：属性， 方法， 事件。

demo如下：

需要引入的文件：

<link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.css">
<script src="jquery-1.11.1.js"></script>
<script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script>


html中的内容：

<body>
	<button>点击</button>
	<a href="http://www.sohu.com" target="_top"> aaaaaaaa</a>
</body>


js代码：

<script type="text/javascript">
	$(function() {
		$("button").button().click(function(event) {
			var data = {};
			draggleTool.createUrlContent(123, "content", data);
		});
		
		//draggleTool.createContent(123);
		
	});
var draggleTool = {
    //创建拖动的面板
	createUrlContent: function(id, clazz, data) {
		var content = $("<div  class='"+ clazz +"'></div>");
		var drg = "<div id='"+ id +"' class='ui-widget-content' style='width:50px;'><a href='http://www.baidu.com' target='_blank'>百度</a></div>";
		content.append(drg);
		$("body").append(content);
		
		//内容可以拖动
		draggleTool.urlDraggable(id);
	},
	urlDraggable:function(id) {
		$( "#" + id ).draggable({
			addClasses: false,
			cursor: "pointer",
			containment:"parent"
		});
	}

}
</script>


效果图如下

：


说明：百度区域能在红色的边框中拖动。

对draggable的属性，事件，方法个别说明，详细进http://api.jqueryui.com/draggable/#option-containment查看。

---------------------------------------------------------------------------------------------------------------

属性：

cursor：表示拖动的区域拖动时候成什么样的手势，常见如：crosshair pointer move

containment:：表示拖动的元素活动的区域，多种类型支持，若是String类型，则可以填的值为"parent", "document", "window".

disabled：选的值为false或者true，默认为false，若为true表示不能拖动。

----------------------------------------------------------------------------------------------------------------

方法：

enable: 表示元素可以拖动

[code]       $( ".selector" ).draggable( "enable" );


disable：表示元素不能被拖动

[code]       $( ".selector" ).draggable( "disable" );


destroy：表示元素拖动被摧毁，不能被拖动，不能通过enable方法回复

[code]       $( ".selector" ).draggable( "destroy" );


---------------------------------------------------------------------------------------------------------------

事件：

drag( event, ui )

表示元素拖动时候会触发的监听

[code]$( ".selector" ).draggable({
drag: function( event, ui ) {}
});

等价于

[code]$( ".selector" ).on( "drag", function( event, ui ) {} );
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航