• jQueryUI之交互


    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="../jquery-2.2.4.min.js"></script>
    		<script src="jquery-ui.min.js"></script>
    		<link rel="stylesheet" href="jquery-ui.min.css" type="text/css" />
    		<style>
    			.ui-selected {
    				background: #004099;
    			}
    		</style>
    		<script>
    			//允许拖动
    			$(function() {
    				//可拖动
    				$('#div1').draggable();
    				//可拖入
    				$('#div2').droppable();
    				$('#div2').on('drop', function(event, ui) {
    					alert();
    				});
    				$('#div3').resizable();
    
    				//列表选择
    				$('#select').selectable();
    				$('#btn').button();
    				$('#btn').on('click', function() {
    					if ($('#right').hasClass('ui-selected')) {
    						alert('回答正确');
    					}
    				})
    
    				//列表拖动排序
    				$('.sort').sortable();
    			})
    		</script>
    	</head>
    	<div id='div1' style=" 100px ; height: 100px ; border: 1px solid black;">draggable</div>
    	<div id='div2' style=" 200px ; height: 200px ; border: 1px solid red;">droppable</div>
    	<div id='div3' style=" 300px ; height: 300px ; border: 1px solid red;">resizeable</div>
    
    	<!--selecteable-->
    	<p>世界上最美丽的人是?</p>
    	<ul id="select">
    		<li id="right">A.me</li>
    		<li>B.我</li>
    		<li>C.I</li>
    	</ul>
    
    	<a href="#" id="btn">提交</a>
    
    	<!--<button class="sort">1</button>
    	<button class="sort">2</button>
    	<button class="sort">3</button>
    	<button class="sort">4</button>-->
    	<ul class="sort">
    		<li>1</li>
    		<li>2</li>
    		<li>3</li>
    		<li>4</li>
    	</ul>
    
    	<body>
    	</body>
    
    </html>
    

      一共4项:允许拖动,拖入,列表选择,列表cell拖动排序

  • 相关阅读:
    [Buzz Today]2012.10.08
    [Buzz Today]2012.10.02
    [Tips] How to resolve "You should only open projects from a trustworthy source”
    [Architecture]tumblr.com
    [Buzz Today]2012.09.12
    [Tips]*.rsp文件 == MSBuild Response File
    [CAX Speak]Autodesk收购HSMWorks
    [CAX Speak]Sungrass.io Overview
    The first glance at Inno
    [Tips]HTML5之禁止File Drag&Drop
  • 原文地址:https://www.cnblogs.com/yqlog/p/5596145.html
Copyright © 2020-2023  润新知