博客

jQWidgets jqxTree dragEnd事件

  • Post category:jquery

当用户拖动 jQWidgets jqxTree 组件中的节点并释放鼠标按钮时，dragEnd 事件将被触发。以下是 jQWidgets jqxTree dragEnd 事件的完整攻略：

jQWidgets jqxTree dragEnd 事件

dragEnd 事件在用户拖动 jQWidgets jqxTree 组件中的节点并释放鼠标按钮时触发。

语法

$('#tree').on('dragEnd', function (event) {
    // 处理事件
});

参数

dragEnd 事件处理程序接受一个 event 参数，该参数包含以下属性：

  • args.element：被拖动的节点元素。
  • args.target：拖动操作的目标元素。
  • args.dropAction：拖动操作的类型。可能的值为 'none'、'move' 或 'copy'。
  • args.draggedItem：被拖动的节点的数据。
  • args.targetItem：拖动操作的目标节点的数据。
  • args.previousParent：被拖动的节点的原始父节点的数据。
  • args.previousIndex：被拖动的节点在原始父节点中的索引。

示例

以下两个示例演示如何使用 dragEnd 事件处理程序。

示例 1

// 创建 jqxTree 组件
$('#tree').jqxTree({
    source: data,
    dragStart: function (event) {
        // 记录被拖动的节点
        draggedItem = event.args.element;
    }
});

// 监听 dragEnd 事件
$('#tree').on('dragEnd', function (event) {
    var args = event.args;

    // 如果拖动操作的目标元素是一个节点
    if (args.target.className.indexOf('jqx-tree-item') >= 0) {
        // 获取目标节点的数据
        var targetItem = $('#tree').jqxTree('getItem', args.target);

        // 将被拖动的节点添加到目标节点下
        $('#tree').jqxTree('addTo', { item: draggedItem, parentElement: args.target });
    }
});

在示例 1 中，我们使用 jqxTree() 方法创建了一个 jqxTree 组件，并设置了数据源。然后，我们添加了一个 dragStart 事件处理程序，以记录被拖动的节点。接下来，我们添加了一个 dragEnd 事件处理程序，以处理拖动操作的目标元素。如果目标元素是一个节点，我们获取目标节点的数据，并使用 addTo() 方法将被拖动的节点添加到目标节点下。

示例 2

// 创建 jqxTree 组件
$('#tree').jqxTree({
    source: data,
    dragStart: function (event) {
        // 记录被拖动的节点
        draggedItem = event.args.element;
    }
});

// 监听 dragEnd 事件
$('#tree').on('dragEnd', function (event) {
    var args = event.args;

    // 如果拖动操作的目标元素是一个节点
    if (args.target.className.indexOf('jqx-tree-item') >= 0) {
        // 获取目标节点的数据
        var targetItem = $('#tree').jqxTree('getItem', args.target);

        // 将被拖动的节点添加到目标节点下
        $('#tree').jqxTree('addTo', { item: draggedItem, parentElement: args.target });

        // 更新数据源
        var source = $('#tree').jqxTree('getItems');
        data = source;
    }
});

在示例 2 中，我们在示例 1 的基础上，添加了一个 addTo() 方法后，更新了数据源。这个示例演示了如何在拖动操作完成后更新数据源。

总之，使用 dragEnd 事件处理程序可以轻松地处理 jQWidgets jqxTree 组件中的拖动操作。

Tags: