📌  相关文章
📜  jQWidgets jqxSortable dropOnEmpty 属性(1)

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

jQWidgets jqxSortable dropOnEmpty 属性

jqxSortable是一个基于jQuery的可排序插件，dropOnEmpty属性是一个可选的参数，用于设置当用户试图在没有任何项的情况下将元素放置在空容器中时的行为。

属性值
  • true: 允许将元素放置在空容器中。
  • false: 禁止将元素放置在空容器中。
使用方法
  1. 在HTML文件中引入jQuery和jQWidgets文件：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
  1. 使用jqxSortable创建可排序元素：
<div id="sortableContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

$("#sortableContainer").jqxSortable({
  dropOnEmpty: true
});
示例

以下示例演示了如何使用dropOnEmpty属性将元素放置在空容器中。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxSortable dropOnEmpty 属性示例</title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
</head>
<body>
    <div id="sortableContainer" style="width: 200px; height: 200px; border: solid 1px #ccc; padding: 10px;">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>

    <script>
        $("#sortableContainer").jqxSortable({
            dropOnEmpty: true
        });
    </script>
</body>
</html>
结论

使用dropOnEmpty属性可以设置当用户试图将元素放置在空容器中时的行为。通过将属性值设置为true，可以允许将元素放置在空容器中，而将属性值设置为false则可以禁止这样做。