jQueryUI之交互

来源：互联网发布：里约热内卢知乎编辑：程序博客网时间：2024/05/17 20:30

<!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="width: 100px ; height: 100px ; border: 1px solid black;">draggable</div><div id='div2' style="width: 200px ; height: 200px ; border: 1px solid red;">droppable</div><div id='div3' style="width: 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拖动排序

0 0