JQuery와 드롭 가능한 작동하지

HI이 내 바이올린입니다 : 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>

.. 바이올린에서 잘 작동하지만 난 드롭을 구현하려고 할 때 여기에 작동하지 않는 것은 내 코드입니다. 제발 도와주세요.

i가 작동하지 않는 드롭 또한 다음 코드 http://jsfiddle.net/stmohan/k42HM/show/을 실행할 때 바이올린의 ..

출처

2014-03-28 MAHI

예, 필 드에서 작동하지만 작동하지 않을 때 시스템에서 코드를 사용하려고하면 모든 드래그가 필요합니다. http://jsfiddle.net/stmohan/k42HM/show/ 시도해주세요 .. 작동하지 않습니다. – MAHI

여분의'드래그 가능한 이벤트'를 제거하십시오. http://jsbin.com/ciyecugu/1/ 참조하십시오 –

당신은 block 요소를 삭제하려고합니다. 너비의 기본값은 컨테이너의 100 %입니다. 당신이 display:inline-block;에 드래그 블록을 설정하거나 명시 적으로 폭을 정의하거나 경우

그것은 작동합니다 :)

당신에게 비 inline-block과의 크기 차이를 보여줍니다 여기 내 업데이트 바이올린을 볼 수 있습니다 block 요소 : 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에서 자바 스크립트로 소리를 재생하는 방법에 대해 알아보십시오. (미디어 포맷 크로스 브라우저에 대한 제한 사항을 확인하십시오.) – haxxxton

JQuery와 드롭 가능한 작동하지

답변

관련 문제