Как при клике на элемент списка можно узнать его id, без использования атрибута onclick в li. Только на чистом JS, без Jquery.
<ul id="drag" class="drag-element">
<li id="red">Red</li>
<li id="green">Green</li>
<li id="blue">Blue</li>
</ul>
onClick вообще не рекомендуется использовать. Причин достаточно, см. гугл.
Чтобы не трогать вообще элементы li, можно делегировать обработчик на ul и с него определять id.
Приятная плюшка в том, что теперь можно динамически добавлять/убирать элементы li - код будет работать, тогда как навешивание кучи обработчиков на каждый элемент имеет две плохие стороны: на новые новые элементы действовать не будет и куча ненужных обработчиков, что плохо :)
Пример:
document.querySelector('#drag').addEventListener('click', function(e){ // Вешаем обработчик клика на UL, не LI
var id = e.target.id; // Получили ID, т.к. в e.target содержится элемент по которому кликнули
document.querySelector('#test strong').innerHTML = id; // For example
});li{
cursor: pointer;
}<ul id="drag" class="drag-element">
<li id="red">Red</li>
<li id="green">Green</li>
<li id="blue">Blue</li>
</ul>
<!-- For example -->
<span id='test'>Вы выбрали <strong>ничего</strong></span>Элементарно:
var inputs = document.getElementsByTagName("li");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("click", myFunction);
}
function myFunction() {
alert(this.id);
}