jQuery的投擲的工作不

你好，這是我的小提琴：http://jsfiddle.net/stmohan/k42HM/jQuery的投擲的工作不

中，我已經嘗試了拖放一個例子。當我運行該代碼只阻力wroking下降沒有工作，那麼工作在撥弄罰款，但是當我試圖執行降不這裏工作是我的代碼..

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Example1</title> 

     <script type="text/javascript" src="./js/jquery-1.10.2.js"></script> 
     <script type="text/javascript" src="./js/jquery-ui-1.10.4.custom.js"></script> 
     <script type="text/javascript" src="./js/jquery-ui-1.10.4.custom.min.js"></script> 

     <link rel="stylesheet" type="text/css" href="./css/jquery-ui.css"> 

     <style type="text/css"> 
      #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
      #div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
      #div3 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
     </style> 

     <script type="text/javascript"> 
      $(window).load(function(){ 
      $(function() { 

       $(".draggable").draggable({ 
        snap: ".snapTarget", 
        snapMode: "inner", 
        snapTolerance: 20, 
        revert: "invalid" 
       }); 

       $(".word1 .wordBg").draggable({ 
        snapTolerance: 20, 
        revert: "invalid", 
       }); 
       $(".word1").droppable({ 
        accept: ".word1" 
       }); 

       $(".word2 .wordBg").draggable({ 
        snapTolerance: 20, 
        revert: "invalid", 
       }); 
       $(".word2").droppable({ 
        accept: ".word2" 
       }); 

       $(".word3 .wordBg").draggable({ 
        snapTolerance: 20, 
        revert: "invalid", 
       }); 
       $(".word3").droppable({ 
        accept: ".word3" 
       }); 

      }); 
      }); 
     </script> 
    </head> 

    <body> 
     <p>Drag the W3Schools image into the rectangle:</p> 

     <div id="div1" class="wordBg word1 snapTarget snap1 "></div> <br> 
     <div id="div2" class="wordBg word2 snapTarget snap2 "></div> <br> 
     <div id="div3" class="wordBg word3 snapTarget snap3 "></div> <br> 

     <div class="draggable word1" style="position: relative;"> <img src="./img/img_logo.gif"> </div> 
     <div class="draggable word2" style="position: relative;"> <img src="./img/img_logo.gif"> </div> 
     <div class="draggable word3" style="position: relative;"> <img src="./img/img_logo.gif"> </div> 
    </body> 
</html>

。請幫助我。

在撥弄當我運行的代碼http://jsfiddle.net/stmohan/k42HM/show/隨後也降不工作..

來源

2014-03-28 MAHI

是它在小提琴中工作，但沒有工作，當我嘗試在我的系統中使用代碼時，我已包含所有需要的js文件，只有拖動正在工作。 http://jsfiddle.net/stmohan/k42HM/show/請試試這個.. drop不起作用 – MAHI

刪除額外的'draggable events'。見http://jsbin.com/ciyecugu/1/ –

你想砸block元素。它的寬度默認爲容器的100％。

如果您或者設置拖動塊display:inline-block;或明確定義其寬度它會工作:)

，你可以在這裏看到我更新的小提琴，顯示你非inline-block和大小的區別block elements：http://jsfiddle.net/k42HM/3/

來源

2014-03-28 04:56:15 haxxxton

它的作品謝謝你 – MAHI

@ haxxxton我需要另一個幫助，如果正確的圖像放在正確的盒子裏，我需要播放聲音，當圖像放置錯誤時需要另一個聲音盒..只是給我一些建議或任何幫助.. – MAHI

http://jsfiddle.net/k42HM/4/應該讓你開始成功與不成功觸發..至於做聲音的事情。看看http://stackoverflow.com/a/15955794/648350解決方案來播放聲音與JavaScript（注意對媒體格式跨瀏覽器的限制） – haxxxton

jQuery的投擲的工作不

回答

相關問題