利用jquery ui 实现拖拽

来源：互联网发布：智慧树网络选修课答案编辑：程序博客网时间：2024/05/25 19:58

github演示

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style>         ul {             list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }         li {             margin: 5px;             padding: 5px; width: 150px;             background-color: yellowgreen;         }         #draggable{             background-color: #ccc;         }         </style>        <link rel="stylesheet" href="./js/jquery-ui.min.css">        <script src="jquery.js" charset="utf-8"></script>        <script src="js/jquery-ui.min.js" charset="utf-8"></script>    </head>    <body>        <ul>          <li id="draggable" class="ui-state-highlight">Drag me down</li>        </ul>        <ul id="sortable">          <li class="ui-state-default">Item 1</li>          <li class="ui-state-default">Item 2</li>          <li class="ui-state-default">Item 3</li>          <li class="ui-state-default">Item 4</li>          <li class="ui-state-default">Item 5</li>        </ul>    </body>    <script>     $( function() {       $( "#sortable" ).sortable({         revert: true       });       $( "#draggable" ).draggable({         connectToSortable: "#sortable",         helper: "clone",         revert: "invalid"       });       $( "ul, li" ).disableSelection();     } );     </script></html>

阅读全文

0 0