jQWidgets jqxDragDrop dropTargetLeave事件

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

简介

jqxDragDrop 控件 dropTargetLeave 事件在拖动元素离开目标元素时触发。事件可以用于在动元素离开目标元素时执行一些操作。

完整攻略

下面是 jqxDragDrop 控 dropTargetLeave 事件的完整攻略：

1. 绑定 dropTargetLeave 事件

$("#dragdrop").on('dropTargetLeave', function (event) {
    // 在拖动元素离开目标元素执行一些操作
});

在上述代码中，我们绑定了 dropTargetLeave 事件，并在事件处理函数中执行了一些操作。

1. 解绑 dropTargetLeave 事件

$("#dragdrop").off('dropTargetLeave');

在上述代码中，我们解绑了 dropTargetLeave 事件。

示例

以下两个示例演示何使用 dropTargetLeave 事件。

示例1

在此示例中，创建了一个 jqxDragDrop 控件，并绑定了 TargetLeave 事件。当拖动元素离开目标元素时，改变目元素的背景颜色。

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

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

        // 绑定 dropTargetLeave 事件
        $("#dragdrop").on('dropTargetLeave', function (event) {
            // 改变目标元素的背景颜色
            event.args.target.css('background-color', 'white');
        });
    });
</script>

在上述代码中，我们创建了一个 jqxDragDrop 控件，并绑定了 dropTargetLeave 事件。当拖动元素离开目标元素时，变目标元素的背景颜色。

示例2

在此示例中，创建了一个 jqxDragDrop 控件，并绑定了 dropTargetLeave 事件。当拖动元素离开目标元素时，弹出提示框。

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

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

        // 绑定 dropTargetLeave 事件
        $("#dragdrop").on('dropTargetLeave', function (event) {
            // 弹出提示框
            alert('拖动元素离开目标元素！');
        });
    });
</script>

在上述代码中，我们创建了一个 jqxDragDrop 控件，并绑定了 dropTargetLeave 事件。当拖动元素离开目标元素时，弹提示框。

结语

以上是关于“jQWidgets jqxDragDrop dropTargetLeave事件”的完整攻略，包含事件的介绍、绑定和解绑 dropTargetLeave 事件的示例。在实际开发中，可以根据需要使用 dropTargetLeave 事件，执行一些操作。