Search code examples
javascriptjqueryjquery-uidraggablejquery-ui-draggable

.draggable() is not working for no reason

I was working on my project and had to use .draggable(). I wasn't able to make it work, I didn't know what's wrong so I decided to copy the exercise from Codeacademy and see if it would work. It didn't work either.

My HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Game Test</title>
        <link rel='stylesheet' type='text/css' href='art.css' />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>

    </head>
    <body>

        <div id="stayaway"></div>

    </body>
</html>

My CSS:

#stayaway {
    width: 80px;
    height: 80px;
    background-color: blue;
    position:relative;
}

My JS:

$(document).ready(function(){
        $("#stayaway").draggable();

});

It is just a basic function. I don't know what's wrong here. Other functions like fadeOut are working.

Solution

  • Everything is just fine . You just need to include the jQuery-UI files too

    $(document).ready(function(){
        $("#stayaway").draggable();

});

    Working Fiddle

    You can download from here