Geek Answers Handbook

Draggable does not work

I am trying to implement a draggable (drag and drop) image using a script that is included in the header of my html file. I have 3 shared files for this project; html, css and js. However, when I upload it to my local host, the drag and drop function does not work at all, meanwhile it works fine on Jsfiddle .

This is 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 another kinetic animation on the same page as the drag and drop function. Could this be a problem? Please advise. I am very new to this. Thank you in advance.

+5
source share
1 answer

there are two jquery-ui js files, since including jQuery-ui twice can cause all kinds of problems.

  <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.

+1
source

More articles:


All Articles