如何在mouseover上获取元素ID并将其分配给变量？

我开始学习如何使用jQuery并创建一个小型项目管理应用程序。在应用程序中，您可以将员工从列表中拖放到不同的项目中，以将其分配给它。如何在mouseover上获取元素ID并将其分配给变量？

在每个项目div里有一个ul，我希望雇员被追加到。目前的问题是我可以将员工添加到他的div中，但是他们在ul之外添加。我已经尝试设置一个变量来从项目div中获取元素ID并将其分配给一个变量。然后将该变量连接到appendTo（）调用中以将该项添加到右侧列表中。这是我遇到问题的地方。变量保持返回为[object Object]。

感谢您提前提供任何帮助。这里也是链接到JSFiddle。

HTML

<ul class='employee-list'> 
    <li class='employee'>Ian</li> 
    <li class='employee'>Danny</li> 
</ul> 
<div id='task-list'> 
    <div id="task-1234" class='task'> 
     <h3>Design new email</h3> 
     <ul id="task-1234-employees" class='tasked-employees'></ul> 
    </div> 
    <div id ="task-4321" class='task'> 
     <h3>Update Cart Code</h3> 
     <ul id ="task-4321-employees" class='tasked-employees'></ul> 
    </div> 
</div>

的Jscript

$(document).ready(function() { 
$(function() { 
    var $taskID = $('.task').mouseover(function() {return this.id;}); 
    $(".employee").draggable({ 
     revert: 'invalid' 
    }, { 
     snap: '.task-slot', 
     snapMode: 'inner' 
    }, { 
     appendTo: 'body', 
     helper: 'clone' 
    }); 
    $('.task').droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function (event, ui) { 
      $(this).find(".placeholder").remove(); 
      $("<li class='task-slot'></li>").text(ui.draggable.text()).appendTo("#" + $taskID +"-employees"); 
     } 
    }); 
}); 
});

来源

2013-04-21 IanAuld

基本上，你有没有需要摆在首位的mouse over。

所有需要的信息是在UI和事件drop方法参数可用。

试试这个

$(document).ready(function() { 
    $(function() { 
     $(".employee").draggable({ 
      revert: 'invalid' 
     }, { 
      snap: '.task-slot', 
      snapMode: 'inner' 
     }, { 
      appendTo: 'body', 
      helper: 'clone' 
     }); 
     $('.task').droppable({ 
      activeClass: "ui-state-default", 
      hoverClass: "ui-state-hover", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function (event, ui) { 
       var employee = ui.draggable.text(); 
       $(this).find(".placeholder").remove(); 
       $("<li class='task-slot'></li>").text(employee) 
        .appendTo($(event.target).find('ul.tasked-employees')); 
      } 
     }); 
    }); 
});

Check Fiddle

来源

2013-04-21 17:43:30

如何在mouseover上获取元素ID并将其分配给变量？

回答

相关问题