如何在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並將其分配給變量？

回答

相關問題