5
Próbuję zaimplementować przeciągnięcie (przeciągnięcie obrazu &) za pomocą skryptu zawartego w nagłówku mojego pliku html. Mam 3 oddzielne pliki dla tego projektu; html, css i js. Jednakże, kiedy ładuję go do mojego hosta lokalnego, funkcja przeciągania nie działa w ogóle, podczas gdy działa doskonale na Jsfiddle.Funkcja przeciągania nie działa
To 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>
Oto 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;
}
ja również kilka innych kinetyczną animacji w tej samej stronie co funkcji drag-and-drop. Czy to może być problem? Proszę o poradę. Jestem w tym nowy. Z góry dziękuję.
Masz wiele odniesień do interfejsu użytkownika jQuery. Użyj całości lub niestandardowego. Również zapakuj swój kod jQuery w dokument gotowy handler –
Masz na myśli ten ?: –
fxrxh
Tak, usuń. Lub ten '/ 1.11.4/jquery-ui.min.js' poniżej –