博客

jQWidgets jqxDragDrop dropAction属性

  • Post category:jquery

以下是关于“jQWidgets jqxDragDrop dropAction属性”的完整攻略，包含两个示例说明：

简介

jqxDragDrop 控件的 dropAction 属性用于设置拖动操作完成后的行为。该属性可以设置为 none、move、copy 或 link，分别表示不执行任何操作、移动、复制或链接操作。

完整攻略

下面是 jqxDragDrop 控件 dropAction 属性的完整攻略：

  1. 设置 dropAction 属性
$("#dragdrop").jqxDragDrop({
    dropAction: 'move'
});

在上述代码中，我们设置了 dropAction 属性为 move，表示拖动操作完成后将执行移动操作。

  1. 获取 dropAction 属性
var dropAction = $("#dragdrop").jqxDragDrop('dropAction');

在上述代码中，我们获取 dropAction 属性的值。

示例

以下两个示例演示如何使用 dropAction 属性。

示例1

在此示例中，创建了一个 jqxDragDrop件，并设置了 dropAction 属性为 move。当拖动操作完成后，将执行移动操作。

<div id="dragdrop">
    <div>拖动元素</div>
</div>

<script>
    $(document).ready(function () {
        // 创建 jqxDragDrop 控件
        $("#dragdrop").jqxDragDrop({
            dropTarget: $("#dropTarget"),
            dropAction: 'move'
        });
    });
</script>

在上述代码中，我们创建了一个 jqxDragDrop 控件，并设置了 dropAction 属性为 move，表示拖动操作完成后将执行移动操作。

示例2

在此示例中，创建了一个 jqxDragDrop 控件，并设置了 dropAction 属性为 copy。当拖动操作完成后，将执行复制操作。

<div id="dragdrop">
    <div>拖动元素</div>
</div>

<script>
    $(document).ready(function () {
        // 创建 jqxDragDrop 控件
        $("#dragdrop").jqxDragDrop({
            dropTarget: $("#dropTarget"),
            dropAction: 'copy'
        });
    });
</script>

在上述代码中，我们创建了一个 jqxDragDrop 控件，并设置了 dropAction 属性为 copy，表示拖动操作完成后将执行复制操作。

结语

以上是关于“jQWidgets jqxDragDrop dropAction属性”的完整攻略，包含属性的介绍、设置和获取 dropAction 属性的示例。在实际开发中，可以根据需要设置 dropAction 属性，以指定拖动操作完成后的行为。

Tags: