Question

我正在实现jQuery draggable插件以及元数据插件，但我正在努力从droppable的回调函数访问元数据。我可以访问draggable / droppable函数之外的元数据，它工作正常;但是当我从函数内部调用时，我得到一个空对象 - 除非我预先加载元数据。让我进一步解释......我有以下内容：

<div id="NavigationSorting">
<ul class="drgLocation">
    <li>
    <span>Location 1</span>
        <ul class="drgArea">
            <li data="{JobAreaID: '1'}">
            <div class="dzArea ui-droppable"></div>
            <span>Area 1</span>
                <ul class="drgTreatment">
                    <li><span>Treatment 1.1</span></li>
                    <li><span>Treatment 1.2</span></li>
                </ul>
            </li>
            <li data="{JobAreaID: '2'}" id="test">
            <div class="dzArea ui-droppable"></div>
            <span>Area 2</span>
                <ul class="drgTreatment">
                    <li><span>Treatment 2.1</span></li>
                    <li><span>Treatment 2.2</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我在document.ready块中有以下内容：

        $('#NavigationSorting .dzArea').droppable({
        accept: '.drgArea li',
        tolerance: 'touch',
        hoverClass: 'droppableArea',
        drop: function (e, ui) {
            var ul = $(this).parent();

            var data2 = $(ui.draggable).metadata({ type: 'attr', name: 'data' });
            alert(data2.JobAreaID);

            ul.before(ui.draggable);
        }
    });

    $('#NavigationSorting .drgArea>li').draggable({
        //handle: ' > dl',
        opacity: .8,
        addClasses: false,
        helper: 'clone',
        zIndex: 100
    });

如果我向上拖动第二个LI，我会得到一个数据的空对象（JobAreaID未定义）。但是，如果我在之前添加以下，则可以使用draggable / droppable代码：

var data = $("#test").metadata({ type: 'attr', name: 'data' });

这在我的测试场景中很好，但在制作中我不会知道所有的id值（更不用说这似乎是浪费）。我考虑添加一个类并在元数据选择器中使用它，但它只从第一个匹配元素中获取数据，因此在这种情况下，JobAreaID 2将为null。

任何帮助都会非常感激，因为这让我发疯，但我无法相信这是不可能的。

谢谢！

Answer 1

我仍然认为这不是最好的方法，但我通过循环遍历所有包含数据的元素并单独填充元数据来解决这个问题：

$("#NavigationSorting .drgArea>li").each(function (i) {
    $(this).metadata({ type: 'attr', name: 'data' });
});

我在页面加载时执行此操作，然后我可以从droppable函数访问它。

jQuery Draggable清除元数据

1 个答案: