jqueryeasyUI(3 元素拖动)

最新推荐文章于 2018-12-13 11:09:16 发布

转载最新推荐文章于 2018-12-13 11:09:16 发布 · 194 阅读

文章标签：

#easyui

java 同时被 3 个专栏收录

44 篇文章

订阅专栏

easyUI

10 篇文章

订阅专栏

jquery

9 篇文章

订阅专栏

本文介绍了一个使用jQuery UI实现元素拖拽的例子。展示了三种不同配置下的拖拽效果：直接拖拽、克隆拖拽及自定义代理拖拽。适用于前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建3个DIV,

配置不同的拖拽参数

<title> 元素拖拽</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
</head>

<style>
 .demo{
 height: 60px;
  width: 60px;
  position: absolute;
  	border:2px solid #d3d3d3;
 }
 
 #div0{
 
  left:20px;
 top:20px;
  background-color: red
 }
 
 .proxy{
			border:1px dotted #333;
			width:60px;
			height:60px;
			text-align:center;
			background:blue;
		}
  #div1{
left:100px;
top:20px;
  background-color: green
 }
 
  #div2{
 left:180px;
top:20px;
  background-color: yellow
 }
 

</style>

	<script>
		$(function(){
			//允许拖拽
			$('#div0').draggable();
			//创建一个克隆来进行拖拽
			$('#div2').draggable({
				proxy:'clone'
			});
			//通过创建自定义代理（proxy）让其可以拖动。
			$('#div1').draggable({
				proxy:function(source){
					var p = $('<div class="proxy">proxy</div>');
					p.appendTo('body');
					return p;
				}
			});
		});
	</script>