文档章节

[JS]Drag And Drop

暗之幻影
 暗之幻影
发布于 2015/09/23 16:59
字数 357
阅读 7
收藏 0

API:

 

new Draggable(icon, {
				
    			// 是否使用镜像:false为拖动源对象,true为拖动拷贝镜像对象 
    			ghosting: true, 
    			// 是否绝对定位:false为相对于父容器定位
    			absolute: true,
    			// 是否还原拖动:true为拖动后释放鼠标会还原回原来位置
    			revert: function(){return true;},
    			// 还原过程中执行效果
    			reverteffect: function(element, top_offset, left_offset) {
    				element.setStyle({left:0,top:0});
    	    	}
    		});

 

 Droppables.add('drop', {containment: "items",
onDrop: function(element) {
			alert(element.id);
		}
	});
 

示例:

 

<html>  
	<head>  
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
		<title>js drag + drop koyoz</title>  
		<script type="text/javascript" src="xframework/lang.js"></script>
		<script type="text/javascript" src="xframework/drag-drop.js"></script>  
		<style type="text/css">  
		* {margin:0px;padding:0px;font-size:12px;}   
		.drop{
			
			width:200px;
			height:100px;
			border:1px #A5B6C8 solid;
			background:#EEF3F7;
			
			padding:10px;
		}   
		.item {width:100px; height:28px;background:#C2ECA7;text-align:center;line-height:28px;cursor:pointer;margin-top:5px;}   
		#items {margin: 50px 0 0 100px;}   
		</style>  
	</head>  
  
<body>  
	<div id="drop1" class="drop">水果</div>  
	<div id="drop2" class="drop">气象</div>  
	
	<div id="items1">    
		<div id="item4" class="item">桃子</div>  
		<div id="item5" class="item">西瓜</div>  
		<div id="item6" class="item">葡萄</div>  
	</div>
	
	<div id="items2">  
		<div id="item1" class="item">风</div>  
		<div id="item2" class="item">雨</div>  
		<div id="item3" class="item">雷</div>    
		<div id="item3" class="item">电</div>    
	</div>
  
	<script type="text/javascript">  

	//逐个注册drag事件   
	var itemx = document.getElementById('items1').getElementsByTagName("div")   
	itemx.each(function(item){
		new Draggable(item, {
    		ghosting: false
    	});	
	});
	
	//逐个注册drag事件   
	var itemx = document.getElementById('items2').getElementsByTagName("div")   
	itemx.each(function(item){
		new Draggable(item, {
    		ghosting: false
    	});	
	});
	
	//注册放置对象
	Droppables.add('drop1', {
        containment: "items1",
        onDrop: function(element) {
			alert(element.id);
		}
	});
	
	Droppables.add('drop2', {
        containment: "items2",
        onDrop: function(element) {
			alert(element.id);
		}
	});
	</script>  
</body>  
  
</html>
所需要的lib: drag-and-drop 1.0:http://www.kuaipan.cn/file/id_14343253738414509.html
lang 1.0: http://www.kuaipan.cn/file/id_14343253738414508.html

本文转载自:http://depravedangel.iteye.com/blog/1602752

暗之幻影
粉丝 20
博文 377
码字总数 71245
作品 0
南京
高级程序员
私信 提问
7 项 Web 开发者需要了解的新技术

Web 开发者需要经常更新他们的知识,学习新的技术,如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的Web开发技术,作为一个Web开发人员,你需要了解、熟悉并学会...

红薯
2011/09/20
6.7K
20
想要一款免费的javascript UI组件库

想要一款免费的javascript UI组件库,类似EXT JS,不过要免费的。包含Layout,tree,drag and drop等功能,最好要漂亮点的。 大家给我推荐下吧。

绝对零度
2012/06/04
738
3
jQuery 的拖放操作插件集合(共25款)

本文收录了一组 jQuery 用于实现网页上的元素拖放操作的插件,介绍内容大同小异,不再翻译,大家通过截图可大概了解该插件的情况。 jquery.event.drag jquery.event.drag is an awesome jQue...

oschina
2013/03/19
15.7K
10
基于HTML5的Drag and Drop生成图片Base64信息

HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的...

xhload3d
2014/12/19
414
0
RichFaces 4.3.0.CR1 发布

RichFaces 4.3 的首个 CR 版本发布了,该版本没有包含任何新特性,主要是文档、示例方面的完善,你可以直接从这里 下载 ,并参考 getting started guide. 该版本修复了以下 bug: Validation...

红薯
2013/01/19
581
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部