利用jquery ui 实现拖拽

最新推荐文章于 2021-09-14 19:05:37 发布

原创最新推荐文章于 2021-09-14 19:05:37 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用 jQuery UI 实现的拖拽和排序功能示例。该示例展示了如何通过简单的 HTML 和 JavaScript 代码实现元素的拖拽及列表项的排序功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>