jQuery UI Draggable не работает

Я включил библиотеку jquery, а затем библиотеку пользовательского интерфейса jquery, и она по-прежнему не работает. Использование Chrome

Следующий Код: 

<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 type="text/javascript">
    $(function() {
        $( ".drag" ).draggable();
    });
</script>

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

??? Я нигде не могу найти никаких решений. Отладчик говорит, что метод draggable не существует. Но я добавил jQuery и jQuery ui, и пути верны! это просто не работает.

7 4
jquery jquery-ui-draggable

7 ответов:

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

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

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

Http://jsfiddle.net/u7zWA/

13

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

<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

2

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

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

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

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

1

В моем случае я использовал более старую версию пользовательского интерфейса 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>
1

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

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

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

Сразу после перетаскиваемого объекта, чтобы быть абсолютно уверенным, что все загружено в нужное время.

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

0

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

.ui-dialog {
    position: fixed;
}
0

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

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

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

0