Menu
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.
473
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.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
