Функция jQuery UI Draggable не работает

У вас есть одна из этих проблем:

1. Ваши файлы пути jQuery или jQuery UI Javascript неверны
2. Ваш пользовательский интерфейс jQuery не включает перетаскиваемые
3. Ваши файлы jQuery или jQuery UI Javascript повреждены
4. Ваш div не оформлен и пуст, поэтому перетаскивать нечего
5. Что-то сталкивается с вашим jQuery или пользовательским интерфейсом jQuery, поэтому оно не работает.

Ваш код правильный, и он должен работать:

http://jsfiddle.net/u7zWA/

Попробуй это :

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="type/javascript"></script>
<script src="js/ui/jquery.ui.draggable.js" type="type/javascript"></script>
<script type="text/javascript">
    $(function() {
        $( ".drag" ).draggable();
    });
</script>

<div id="aboutBox" class="boxLook boxBg drag"></div>

Вы должны внедрить перетаскиваемый компонент в свой проект и включить его! http://jqueryui.com/download

Моя проблема заключалась в том, что у меня было другое событие, связанное с mousemove, которое содержало e.stopPropagation();, что мешало работе кода мыши .draggable().

$(document).on('mousemove', '*', function (e) { MyFunction(e); });

function MyFunction (sender, e)
{
    e.stopPropagation();
    ...
}

Решение состояло в том, чтобы удалить e.stopPropagation(); и переоценить его реализацию.

Я исправил это, установив положение диалога как фиксированное. Это сработало как по волшебству после нескольких часов стресса:

.ui-dialog {
    position: fixed;
}

В моем случае я использовал более старую версию пользовательского интерфейса jQuery. Я заменил старую ссылку на следующую, и все заработало, как задумано.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

Проверьте, загружен ли ваш перетаскиваемый объект в окне просмотра. Если это не так, он не будет работать должным образом.

Мой совет - добавить этот код

<script type="text/javascript">             
$(function() {                         
    $( ".drag" ).draggable({ helper:'clone' });
});
 </script>

СРАЗУ ПОСЛЕ перетаскиваемого объекта, чтобы быть абсолютно уверенным, что все загружено в нужное время.

Когда вы будете уверены, что все в порядке, тогда вы сможете провести рефакторинг.

Другая возможная причина заключается в том, что вы отключили все события перетаскивания где-то еще в своем коде, используя что-то вроде этого:

window.ondragstart = function () { return false; };

Это предотвратит срабатывание события перетаскивания пользовательского интерфейса jQuery.

У меня была такая же проблема, и я решил проблему с обновлением файла пользовательского интерфейса Jquery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" type="text/javascript"></script>

У меня был еще один файл в кодовой базе, использующий draggable, а затем я просто хотел повторно использовать имя класса.

Это исправило проблему для меня: я переименовал класс CSS, чтобы он отличался от предыдущего.

Предыдущая реализация:

  $(".old_css_class_name").unbind("droppable");
    $(".old_css_class_name").draggable({
        helper: "clone",
        cursor: "move",
        connectToSortable: ".css_name_to_sortable_implementation" //optional
    });

Новая реализация:

$(".new_css_class_name").unbind("droppable");
    $(".new_css_class_name").draggable({
        helper: "clone",
        cursor: "move",
        connectToSortable: ".new_name_to_sortable_implementation" //optional
    });

Необязательно: вы можете добавить эту строку кода перед реализацией функции перетаскивания.

$(".the_new_css_class_name").unbind("droppable");