jquery droppable無法正常工作

夥計們。我花了幾個小時來檢查我的jQuery，爲什麼它不能正常工作。只是混淆了爲什麼droppable函數不會在方格div放入盒子div時觸發警報。jquery droppable無法正常工作

這裏是我的html

<html> 
<head> 
<title>jquery - draggable </title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

    <script src="js/javascript.js"></script> 
</head> 
<body> 
<div class="container"> 
    <div id="square"></div> 
    <br>   
    <div id="box"></div> 
</div> 
</body> 
</html>

這是我的風格

#box { 
    margin: 0 auto; 
    background: #ecf0f1; 
    border-radius: 10px; 
    border-style: dashed; 
    height: 100px; 
    width: 100px; 
} 
#square { 
    margin: 0 auto; 
    background: #3498db; 
    border-radius: 10px; 
    height: 100px; 
    width: 100px; 
}

這是我的javascript

$(document).ready(function(){ 
    $("#square").draggable(); 

    $("#box").droppable({ 
     drop: handleDropEvent 
    }); 

    function handleDropEvent(event, ui){ 
     alert('Hello'); 
    } 

});

任何幫助，將不勝感激。謝謝！

來源

2014-09-22 Sonic Master

這裏是我的http://jsfiddle.net/p0n27hcz/2/ – 2014-09-22 08:34:33

你撥弄工作正常，我在Firefox瀏覽器。 – 2014-09-22 08:35:27

那，這就是我所困惑的。 FrédéricHamidi爲什麼在Chrome上效果不佳？ – 2014-09-22 08:39:09

發揮與droppbles tolerance選項。

「適合」：可拖拽完全覆蓋可拖拽。
「相交」：可拖動在兩個方向上至少可重疊50％。
「指針」：鼠標指針與可放置區域重疊。
「觸摸」：可拖拽與任何數量的可拖拽重疊。

$(document).ready(function(){ 
 
    $("#square").draggable(); 
 

 
    $("#box").droppable({ 
 
     drop: handleDropEvent, 
 
     \t tolerance:"pointer" 
 
    }); 
 

 
    function handleDropEvent(event, ui){ 
 
     alert('Hello'); 
 
    } 
 

 
});

#box { 
 
    margin: 0 auto; 
 
    background: #ecf0f1; 
 
    border-radius: 10px; 
 
    border-style: dashed; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
#square { 
 
    margin: 0 auto; 
 
    background: #3498db; 
 
    border-radius: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
<title>jquery - draggable </title> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 

 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
 

 
    <script src="js/javascript.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div id="square"></div> 
 
    <br>   
 
    <div id="box"></div> 
 
</div> 
 
</body> 
 
</html>

來源

2014-09-22 08:41:43 SCHTAILian

Whoaaaaa！謝謝你，Schtailian。現在它可以同時使用chrome和mozilla。 – 2014-09-22 08:47:19

不錯，不客氣。 – SCHTAILian 2014-09-22 08:49:28

這實際上並不會使方塊上的方格變小。相反，您將始終需要拖動方塊並將鼠標光標放在方框上的div上。 – 2014-09-22 08:54:45

$("#box").droppable({ 
     drop: handleDropEvent, 
     tolerance:"pointer" 
    });

將由SCHTAILian上班解釋。但是這會迫使你將你的指針放在#box div之內，這樣可以下降的#square就會正確地落在它上面。

這裏是另一種方法小提琴http://jsfiddle.net/naeemshaikh27/p0n27hcz/3/

只是刪除

margin:auto;

來源

2014-09-22 08:59:25

jquery droppable無法正常工作

回答

相關問題