«draggable is not a function», когда внутри другой функции

Question

Im пытается активировать функцию jQuery-ui .draggable, когда пользователь нажимает кнопку. Сценарии включены и хорошо, потому что все работает, когда я использую следующий код:

<script> 
function test() { 
$(".bord").draggable({ containment: ".rom", scroll: false }); 
} 
test() 
</script> 

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

<script> 
function test() { 
$(".bord").draggable({ containment: ".rom", scroll: false }); 
} 
$("#bordplassering").click(function() { 
    test(); 
}); 
</script> 

И здесь начинается проблема ... это дает мне следующую ошибку:

" ТипError: $ (...). Draggable не является функцией «

Почему !?

Answer 1

Пожалуйста, используйте его, как это: (Вы должны переместить функцию щелчка внутри document.ready функции)

<script> 
function test() { 
$(".bord").draggable({ containment: ".rom", scroll: false }); 
} 

$(document).ready(function() { 
    $("#bordplassering").click(function() { 
     test(); 
    }); 
}); 

</script> 

Answer 2

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

<script> 
     $(function() { 
     $(".bord").draggable({containment: ".rom", scroll: false}); 
     }); 
    </script> 

Но прежде, чем вы начнете:

1. Библиотека jQuery должна быть представлена ​​перед вызовом $
2. библиотека JQuery UI должен присутствовать на перед вызовом $()$.draggable

Также вы должны прочитать о DOM и DOM ready event.

Answer 3

Я предлагаю применить функцию draggble только в начале, а при нажатии вы можете включить и отключить методы, чтобы сделать его невозможным и отключить.

http://api.jqueryui.com/draggable/#method-disable

использование document.ready

$(document).ready(function() { 
    $(".bord").draggable({ containment: ".rom", scroll: false }); 
    $(".bord").draggable("disable"); 
    $("#bordplassering").click(function() { 
     $(".bord").draggable("enable"); 
    }); 
}); 

Answer 4

Спасибо за помощь, все. Как отмечалось в комментарии здесь, проблема заключалась в том, что jQuery был загружен второй раз в файле footer.php.

Но, конечно, много замечательных идей для улучшения кода.