jQuery Draggable清除元数据

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

<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 
    });

如果我拖到第二个李，我获取数据的空对象（JobAreaID未定义）。不过，如果我之前添加以下可拖动/可弃代码它的工作原理：

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

这是在我的测试场景罚款，但在生产中我不知道所有的ID值（更何况这看起来很浪费）。我考虑添加一个类并在元数据选择器中使用它，但它只捕获来自第一个匹配元素的数据，因此在这种情况下，JobAreaID 2将为空。

任何帮助将不胜感激，因为这是让我疯狂，但我不能相信这是不可能的。

谢谢！

来源

2011-11-16 Ryan Brooks

也许属性名称'data'在两个插件之间混乱了。你有没有尝试过另一个标识符或使用'data-xxx'之类的东西？另外，你不需要做'$（ui.draggable）'，因为ui.draggable已经是一个jquery对象。 –

关于属性名称的好想法，但事实并非如此。我尝试了你的建议，但它仍然无效。我想出了另一个解决方案，但将工作。尽管元数据只支持第一个元素，但我只是在循环中调用它，如下所示：'$（“＃NavigationSorting .drgArea> li”）。each（function（i）{this）.metadata（{type ：'attr'，name：'data'}）; }）;'' –

我仍然不认为这是最好的方法，但我解决了这个通过我的所有包含数据元素循环和单独填充元数据，像这样：

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

我这样做是在页面加载，然后我可以通过droppable函数访问它。

来源

2011-11-17 22:15:47

jQuery Draggable清除元数据

回答

相关问题