zoukankan      html  css  js  c++  java
  • jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了:

    演示样例:

    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Easy UI</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
    <script>
    $(function () {
    
    	$.fn.droppable.defaults.disabled = true;//重写默认值为true
    
    	$('#dd').droppable({
    		accept : '#box,#ipt',//设置哪些元素能够被接受
    		disabled : false,	 //不单独设置默认值时默觉得false,当设置为true的时候则禁止放置。
    
    		/*
    			onDragEnter仅仅触发一次,而Over会在不停的拖动中不停触发,  onDragEnter触发的事件在移动过程中一瞬即逝,所以要想看清楚最好是看浏览器控制台,或者加个alert中断一下。
    			onDrop是放入到放置区,松开鼠标左键,丢下的操作。
    		*/
    		onDragEnter : function (e, source) {
    			console.log('昙花一现');
    			$(this).css('background', 'blue');
    			//alert('enter');
    		},
    		onDragOver : function (e, source) {
    			console.log(source);
    			$(this).css('background', 'orange');
    			//alert('over');
    		},
    		onDragLeave : function (e, source) {
    			console.log(source);
    			$(this).css('background', 'green');
    			//alert('over');
    		},
    		onDrop : function (e, source) {
    			console.log(source);
    			$(this).css('background', 'maroon');
    			//alert('over');
    		}
    
    	});
    	
    	$('#dd').droppable('disable');//禁止
    	$('#dd').droppable('enable'); //同意
    
    
    	$('#box').draggable({
    		accept : '#ipt',//设置哪些元素能够被接受
    		disabled : false	 //不单独设置默认值时默觉得false,当设置为true的时候则禁止放置。
    	});
    	$('#ipt').draggable({
    		
    	});	
    	
    });
    
    </script>
    </head>
    <body>
    
    
    <div id="dd" class="easyui-droppable"
    data-options="accept:'#box,#pox,#ipt'" style="600px;height:400px;background:#66ffff">
    </div>
    
    <div id="box" style="100px;height:100px;background:#ccc;">
    	<span id="pox">内容部分</span>
    </div>
    <div id="ipt" style="50px;height:50px;background:#ccc;">
    	内容IPT
    </div>
    </body>
    </html>

    点击下载源码

  • 相关阅读:
    使用DevExpress 控件开发通用查询控件(Winform)
    SQL 排序函数
    SQL Server 消除科学计数法
    Excel VBA 的GetOpenFilename 方法
    分布式定时任务利用分布式定时任务框架xxljob实现任务动态发布
    java 同时启动多个项目
    Jooq配置与使用
    java 线上诊断工具arthas使用记录及k8s使用
    k8s脚本
    输入汉字获得拼音(VB.net)
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/3950993.html
Copyright © 2011-2022 走看看