Я работаю над своим первым проектом JQuery, и я наткнулся на некоторый контрольно-пропускной пункт. Я пытаюсь разрешить перетаскивание из списка вложенных списков (ul). Все работает, кроме позиционирования. Цель состоит в том, чтобы вертикально перетаскивать перетаскиваемый объект относительно курсора (горизонтальное перемещение ограничено), чтобы можно было легко опустить li с вложенными в него элементами. Вот соответствующий JS:
$(function() {
$( ".organizerlink" ).draggable({ axis: "y",
containment:"#organizer",
scroll: false ,
helper: "original",
revert: "invalid",
cursorAt: { top: Math.round($(this).outerHeight() / 2)}
});
и HTML:
<ul id="organizer">
<li class="organizerTarget"> </li>
<li class="organizerlink" id="dbid-1">Page
<ul><li class="organizerTarget organizerNewParent"> </li></ul>
</li>
<li class="organizerTarget"> </li>
<li class="organizerlink" id="dbid-2">About
<ul>
<li class='organizerTarget'> </li>
<li class='organizerlink' id="dbid-3">Another Page<ul><li class="organizerTarget organizerNewParent"> </li></ul></li>
<li class='organizerTarget'> </li>
<li class='organizerlink' id="dbid-4">Example<ul><li class="organizerTarget organizerNewParent"> </li></ul></li>
</ul>
</li>
<li class="organizerTarget"> </li>
<li class="organizerlink" id="dbid-27">Stuff
<ul><li class="organizerTarget organizerNewParent"> </li></ul>
</li>
Некоторые вещи, которые я уже пробовал:
- установка cursorAt в $ (this) .height () - не сработало, я предполагаю, что height () вытягивает высоты css, но они не определены явно, поэтому он переходит к 0
- установка его в outerHeight () выдает ошибку "elem.style is undefined" в firebug
Я знаю, что элемент externalHeight существует в jquery, и на основании API doc может показаться, что он может быть рассчитан автоматически, даже если CSS не определен, поэтому я считаю, что это правильно путь, и, возможно, $ (this) - это не то место, где его нужно искать.