Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Draggable is not working

I am trying to implement a draggable (drag & drop) picture using a script that is included at the header of my html file. I have 3 separated files for this project; html, css and js. However, when I upload it to my localhost, the draggable function is not working at all meanwhile it is working perfectly on Jsfiddle.

This is the html:

<!DOCTYPE HTML>
<html>
<head>
    <link href="index-05.css" rel="stylesheet">
    <script type="text/javascript" src="index-05.js"></script>

<!--dragonfly animation-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
    <!--<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.11.4/jquery-ui.min.js"></script>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="kinetic-v5.1.0.js"></script>
    <script type="text/javascript" src="tweenmax.min.js"></script>


<!--draggable-->
    <script>
        $(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
        $(".boxthree").draggable({ containment: "parent", scroll: false});
    </script>

</head>


<body>
    <div id="container"></div>

    <div class="containment-wrapper">
        <div class="boxone" class="draggable ui-widget-content"></div>
        <div class="boxtwo" class="draggable ui-widget-content"></div>
        <div class="boxthree"></div>
    </div>

</body>
</html>

Here is the css:

body {
    margin:0;
    height: 595px;
}
#container{
    /*background-color:rgb(19,163,174);*/
    background-image:url(bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:595px;
    overflow: hidden;
}
#container .background {
    width: 100px;
    height: 200px;
}
/************************************draggable************************************/
.containment-wrapper {
    background:khaki;
    overflow: hidden;
    padding: 50px;
  }
.boxone {
  width: 100%;
  height: 200px;
  background: papayawhip;
    border-radius:50px;
  margin-bottom: 15px;
}
.boxtwo {
    width: 100px;
    height: 100px;
    border-radius:12px;
    background: darkseagreen;
    margin-bottom: 15px;
    float: left;
}
.boxthree {
    width: 100px;
    height: 100px;
    border-radius:50px;
    background: lightcoral;
    margin-bottom: 15px;
    float: left;
}

I also included a few other kinetic animation in the same page as the drag-and-drop function. Could this be the problem? Please advice. I am very new in this. Thank you in advance.

like image 473
fxrxh Avatar asked Nov 09 '22 13:11

fxrxh


1 Answers

there are two jquery-ui js files since including jQuery-ui twice can cause all sorts of issues.

   <script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
    <!--<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.11.4/jquery-ui.min.js"></script>

Please move one of them.

like image 83
Lumi Lu Avatar answered Nov 15 '22 10:11

Lumi Lu