1. 首页
  2. 问答
  3. 简单的jQuery droppable无法正常工作

简单的jQuery droppable无法正常工作

2012-04-21 114 views
4

Draggable在这里工作，但是当我将DIV拖动到可放置区域时，警报函数并未触发。我确信这是愚蠢的，但也许有人在这里可以阻止我将我的头撞在墙上，我做的不对？简单的jQuery droppable无法正常工作

<head> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
      <title></title> 
     </head> 
     <body> 

    <script> 
      $(function() { 
       $(".draggable").draggable(); 
       $(".droppable").droppable({ 
        drop: function(event, ui) { 
         alert('dropped'); 
        } 
       }); 
      }); 
    </script> 

     <div id=10 class="draggable">one</div> 

     <div id="trash" class="droppable"></div> 



     </body> 
     </html>

来源

2012-04-21 JackBurton

回答

6

问题在于事实上，默认情况下，元素的中心用于确定元素的放置位置。您的div没有定义的大小，因此它是屏幕的宽度。如果您设法放弃它，以便该元素的中心位于可放下的位置，您将看到警报。

这个背景颜色的小提琴演示了这个问题。

http://jsfiddle.net/v6PME/

并配有定义的宽度，你会看到你很可能寻找的功能：

http://jsfiddle.net/v6PME/1/

注：我做了你忽略了你的CSS的假设而#trash div有一定的大小，所以它可以被放入。

来源

2012-04-21 05:40:15

0

它似乎失败了，因为你的droppable div看起来没有任何宽度，所以它不可能在那里丢弃任何东西。我把你的榜样，并修改了它稍微和我能得到它的工作：

<html> 
<head> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
      <title></title> 
     </head> 
     <body> 

    <script> 
      $(function() { 
       $(".draggable").draggable(); 
       $(".droppable").droppable({ 
        drop: function(event, ui) { 
         alert('dropped'); 
        } 
       }); 
      }); 
    </script> 

     <div id=10 class="draggable">one</div> 

     <div id="trash" class="droppable">DROP HERE</div> 



     </body> 
     </html>

来源

2012-04-21 05:40:31

相关问题

 相关问题