Если вы не видите весь ваш код (html и javascript), это усложняет задачу, но ...
Из вашего примера выше:
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
$('li').draggable();
$('li').draggable(); ничего не делает там, где он есть сейчас (кроме, возможно, отображения на странице. Чтобы он работал, он должен быть в теге скрипта и, скорее всего, должен быть настроен на запуск после полной загрузки документа.
Попробуйте изменить что-то вроде этого:
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(document).ready(function() {
$('li').draggable();
});
</script>
Это должно указать вашей странице сделать ваши <li> элементы перетаскиваемыми после полной загрузки.
Как только вы получите это начало работы, чтобы узнать, где на вашей странице теги сценария должны go (в <head>, внизу <body>, и т. д. c), когда использовать $(document).ready() с jQuery и как использовать консоль разработчика браузера, чтобы увидеть, что происходит при загрузке страницы.