Draggable無法正常工作

我正在嘗試使用包含在我的html文件標題中的腳本實現可拖動（拖動&拖放）圖片。我有3個分離的文件用於這個項目; HTML，CSS和JS。但是，當我將它上傳到我的本地主機時，可拖動功能完全無法正常工作，並且Jsfiddle正常工作。Draggable無法正常工作

這是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>

這裏是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; 
}

我也包括在同一頁拖動和拖放功能的一些其他動力學動畫。這可能是問題嗎？請指教。我很新。先謝謝你。

來源

2015-05-22 fxrxh

您有多個對jQuery UI的引用。使用整體或自定義。還要將你的jQuery代碼包裝在文檔準備好的處理程序中 –

你的意思是這個嗎？： – fxrxh

是的，刪除它。或者這個在 –

由於包含jQuery-ui兩次會導致各種問題，因此有兩個jquery-ui js文件。

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

請移動其中之一。

來源

2015-05-22 03:17:55 user86745458

Draggable無法正常工作

回答

相關問題