jQWidgets jqxDragDrop disabled 属性

简介

jQWidgets jqxDragDrop disabled 属性是jqxDragDrop插件的一个属性，它用于禁用或启用拖放操作。

语法

$("#target").jqxDragDrop({
    disabled: true   // 禁用拖放操作
});

$("#target").jqxDragDrop({
    disabled: false   // 启用拖放操作
});

参数说明

• disabled：布尔值，用于启用或禁用拖放操作。true表示禁用，false表示启用。

使用示例

<div id="source" style="background-color: #E5E5E5; height:60px; width:100px; padding:10px;">Drag Me</div>
<div id="target" style="background-color: #F0F0F0; height:60px; width:150px; padding:10px;"></div>

<script type="text/javascript">
    $("#source").jqxDragDrop({
        dragZIndex: 1000,
        appendTo: "body",
        initFeedback: function (feedback) {
            feedback.height(30);
            feedback.width(90);
            feedback.addClass('jqx-widget-header');
            feedback.addClass('jqx-draggable');
        },
        feedback: 'clone'
    });

    $("#target").jqxDragDrop({
        initFeedback: function (feedback) {
            feedback.height(30);
            feedback.width(90);
            feedback.addClass('jqx-widget-header');
            feedback.addClass('jqx-draggable');
        },
        onDropTargetEnter: function (event) {
            $("#target").addClass('jqx-drop-target-hover');
        },
        onDropTargetLeave: function (event) {
            $("#target").removeClass('jqx-drop-target-hover');
        },
        onDragEnd: function (dragItem, dropContainer, args) {
            if (dropContainer != null) {
                $("#target").append(dragItem);
            }
        }
    });

    // 点击按钮禁用拖放操作
    $("#btnDisable").click(function () {
        $("#target").jqxDragDrop({
            disabled: true   // 禁用拖放操作
        });
    });

    // 点击按钮启用拖放操作
    $("#btnEnable").click(function () {
        $("#target").jqxDragDrop({
            disabled: false   // 启用拖放操作
        });
    });
</script>

在上述示例中，当我们点击"Drag Me"元素并拖动它时，它会被克隆并在拖动期间跟随鼠标移动。当我们将其释放到"target"元素上时，它会被添加到"target"元素中。

同时，我们可以通过点击"Disable"按钮禁用拖放操作，"Enable"按钮来启用拖放操作。当我们禁用拖放操作时，拖动"Drag Me"时不会触发任何反应。