博客

jQWidgets jqxDragDrop dropTarget属性

  • Post category:jquery

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

简介

jqxDragDrop 控件的 dropTarget 属性用于设置拖动元素目标元素。该属性可以用于控制拖动元素的放置位置。

完整攻略

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

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

在上述代码中，我们设置了 dropTarget 属性为 $("#dropTarget")。

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

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

示例

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

示例1

在此示例中，创建了一个 jqxDragDrop 控件，并设置了 dropTarget 属性。当拖动操作结束时，将拖动元素放置在目标元素内。

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

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

在上述代码中，我们创建了一个 jqxDragDrop 控件，并设置了 dropTarget 属性为 $("#dropTarget")。当拖动操作结束时，将拖动元素放置在目标元素内。

示例2

在此示例中，创建了一个 jqxDragDrop 控件，并设置了 dropTarget 属性。当拖动操作结束时，将拖动元素放置在目标元素内，并在控制台输出目标元素的 ID。

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

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

        // 绑定 dropTarget 事件
        $("#dragdrop").on('dropTarget', function (event) {
            // 输出目标元素的 ID
            console.log(event.args.target.id);
        });
    });
</script>

在上述代码中，我们创建了一个 jqxDragDrop 控件，并设置了 dropTarget 属性为 $("#dropTarget")。当拖动操作结束时，将拖动元素放置在目标元素内，并在控制台输出目标元素的 ID。

结语

以上是关于“jQWidgets jqxDragDrop dropTarget属性”的完整攻略，包含属性的介绍、设置和获取 dropTarget 属性的示例。在实际开发中，可以根据需要使用 dropTarget 属性，控制拖动元素的放置位置。

Tags: