jQuery UI Draggable функция не работает - PullRequest
Новая
       4

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

4 голосов
/ 23 августа 2011

Я включил библиотеку jquery, потом библиотеку пользовательского интерфейса jQuery, и она все еще не работает. Я использую браузер Google 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 AND jQuery UI, и пути верны! это просто не работает.

Ответы [ 7 ]

14 голосов
/ 23 августа 2011

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

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

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

http://jsfiddle.net/u7zWA/

2 голосов
/ 23 августа 2011

Попробуйте: 

<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

1 голос
/ 25 ноября 2016

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

<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 голос
/ 15 октября 2013

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

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

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

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

0 голосов
/ 18 мая 2015

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

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

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

0 голосов
/ 27 мая 2014

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

.ui-dialog {
    position: fixed;
}
0 голосов
/ 02 июля 2013

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

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

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

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

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

...