JQuery UI可拖拽/ Droppable

我无法激活JQuery UI可拖拽和可拖拽的元素。我使用Twitter Bootstrap以及Jinja2进行模板化。这里是我的html：JQuery UI可拖拽/ Droppable

 <div class="well sidebar-nav"> 
     <ul class="nav nav-list"> 
      <li class="nav-header">communities</li> 
      {% for community in communities %} 
      <li class='draggable'><a href="http://localhost:8080/users/{{community}}">{{community}}</a></li> 
      {% endfor %}   
     </ul> 
     </div><!--/.well --> 
     <div class="well sidebar-nav"> 
     <ul class="nav nav-list"> 
      <li class='droppable'><i class="icon-trash"></i><span class="label label-warning">trash</span></li> 
     </ul> 
     </div><!--/.well -->

我试图创建一个名为“社区”到拖动称为“垃圾”的侧边栏导航侧边栏，导航栏的元素。这里是jQuery：

$('.draggable a').on('mouseover', function(){ 
    $(this).draggable(); 
}); 

$('.droppable i').on('mouseover', function(){ 

    drop: function(event, ui) { 

     $('#dialog').dialog() 

    } 

});

我使用.on（）激活社区的原因是为了让用户动态添加更多。我使用这段代码的问题是，它的draggables和droppables都没有被激活，但是当我移动到控制台并使用$（'。draggable a'）。draggable（）激活可拖动时，它们被激活。

我猜想这个问题源于JQuery执行后加载的html元素。我将JQuery移动到页面的末尾，并用$（document）.ready（function（）{...}）将其包围，结果没有任何效果。然后用$（window）.bind（“load”，function（）{...}）包围脚本，同样无效。

我很茫然，很感激一些输入。

来源

2012-11-09 vrume21

首先我相信你的问题可能是你没有在你的容器上打droppable()。您提供的JavaScript会产生错误，这可能是您的可拖动和可拖动元素未激活的原因。这里是一个例子，jsfiddle。它并不漂亮，它没有考虑Bootstrap或Jinja2，但它展示了你的所作所为。

你是对的，你需要确保可拖动和可拖拽的js在任何初始DOM修改JS之后执行。我不相信打电话draggable()或droppable()使用on()事件正在购买任何东西。如果在脚本运行后添加了新的DOM元素，那么您仍然需要将on()事件附加到这些元素。您将会直接附加所需的UI动作，并开启事件，除非我丢失了某些东西，并且出于某种其他原因需要它们。

来源

2012-11-09 18:59:54

我从你的帖子推断，我需要收紧我的JS。解决这个代码和其他地方的错误就是一个窍门。 – vrume21

对于结合上动态添加元素的事件：尝试在（）方法用这种方式：

$(document).on('mouseover', '.draggable a', function(){ 
    $(this).draggable(); 
});

而对于代码的可投放部分相似。

其次，为了droppable工作：为什么不在可拖动的部分使用可拖动的代码中使用相同的模式？所以这样调用droppable：

$(document).on('mouseover', '.droppable i', function(){ 
    $(this).droppable(); 
});

所以直接使用droppable（）方法代替drop事件。

来源

2012-11-09 19:29:11 sorites

JQuery UI可拖拽/ Droppable

回答

相关问题