<!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拖动排序