📌  相关文章
📜  jQWidgets jqxListBox dragStart 事件(1)

📅  最后修改于: 2023-12-03 14:43:24.699000             🧑  作者: Mango

jQWidgets jqxListBox dragStart 事件

简介

jQWidgets 是一个跨浏览器和跨平台的JavaScript组件库，提供了许多UI控件例如日历、图表、表格等。jqxListBox是jQWidgets系列中的一个组件，它是一个展示列表的UI控件，可以进行拖拽操作。

dragStart事件是jqxListBox在拖拽开始时触发的事件。在该事件中可以通过args参数获取拖拽的元素信息。

用法

以下是jqxListBox的一个示例，展示了如何使用dragStart事件。在拖拽开始时，会将拖拽的信息输出到控制台。

<html>

<head>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/jqwidg$
  <script type="text/javascript" src="//cdn.jsdelivr.net/jqwid$
  <script type="text/javascript">
    $(document).ready(function() {
      // 创建列表控件
      var listBoxContainer = $("#listbox");
      var source = [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        // 以下省略
      ];
      listBoxContainer.jqxListBox({ source: source, width: "200", height: "200" });

      // 绑定dragStart事件
      listBoxContainer.on('dragStart', function(event) {
        var args = event.args;
        var item = args.item;
        console.log(item.value);
      });
    });
  </script>
</head>

<body>
  <div id="listbox"></div>
</body>

</html>
参数

dragStart事件的args参数是一个对象，包含以下属性：

  • item：被拖拽的列表项。

具体使用可以参考示例代码。

参考文献