📌  相关文章
📜  jQuery UI 可拖动包含选项(1)

📅  最后修改于: 2023-12-03 15:16:45.282000             🧑  作者: Mango

jQuery UI 可拖动包含选项

概述

jQuery UI 是一个基于 jQuery 的扩展，它提供了一系列可扩展的交互式组件和效果，包括可拖动的元素。

可拖动包含选项是 jQuery UI 提供的一种交互式组件，在网页中可以实现元素的拖动和放置功能，用于实现拖放排序、拖放上传等功能。

本文将介绍如何使用 jQuery UI 实现可拖动包含选项功能。

实现
引入依赖库

使用 jQuery UI 之前，需要先引入 jQuery 和 jQuery UI 两个库。

<head>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
HTML 结构

在页面中，需要定义一个包含多个选项的容器：

<div id="sortable">
  <div class="item">第一项</div>
  <div class="item">第二项</div>
  <div class="item">第三项</div>
  <div class="item">第四项</div>
</div>
JavaScript 代码

使用 jQuery 的 sortable() 方法实现可拖动包含选项功能。

<script>
  $(function() {
    $("#sortable").sortable();
  });
</script>

以上代码将使 #sortable 容器中的每个子元素都可以拖动。如果需要指定某些元素不能拖动，可以使用 items 选项进行设置，例如：

<script>
  $(function() {
    $("#sortable").sortable({
      items: ".item:not(.disabled)"
    });
  });
</script>

以上代码将使 #sortable 容器中的带有 .item 类，但不带有 .disabled 类的子元素可以拖动。

CSS 样式

为了让拖动的元素看起来更加美观，可以使用 CSS 样式进行设置，例如：

<style>
  #sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .item {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    cursor: pointer;
    margin: 5px;
    padding: 10px;
  }

  .item:hover {
    background-color: #f6f6f6;
  }

  .ui-sortable-placeholder {
    border: 2px dotted #ddd;
    visibility: visible !important;
    height: 50px !important;
  }
</style>

以上代码将设置 #sortable 容器为无序列表，每个子元素为白色背景、灰色边框的方框，并在拖动元素时显示半透明的占位符。

示例

点击以下链接可查看示例效果：

可拖动包含选项示例

总结

可拖动包含选项是 jQuery UI 提供的一种交互式组件，可以实现元素的拖动和放置功能，非常适合用于实现拖放排序、拖放上传等功能。

使用 jQuery UI 实现可拖动包含选项功能非常简单，只需要引入依赖库、定义 HTML 结构、编写 JavaScript 代码和 CSS 样式即可。