jQuery UI可拖动/可拖动

Question

我在激活JQuery UI可拖动和可放置元素时遇到困难。 我正在使用Twitter Bootstrap以及Jinja2进行模板制作。 这是我的html：

      <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（）激活社区的原因是允许用户动态添加更多内容。 我在这段代码中遇到的问题是可拖动对象和可拖放对象都没有被它激活，但是当我移到控制台并使用$（'。draggable a'）。draggable（）激活可拖动对象时，它们被激活了。

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

我很茫然，不胜感激。

Answer 1

首先，我相信您的问题可能是您没有在droppable容器上调用droppable() 。 您提供的javascript会产生错误，这可能是为什么未激活可放置和可拖动元素的原因。 这是一个示例jsfiddle 。 它不是很漂亮，并且没有考虑Bootstrap或Jinja2，但它演示了您所追求的。

没错，您需要确保在任何初始DOM修改JS之后执行可拖动和可拖放js。 我不相信使用on()事件调用draggable()或droppable()不会给您带来任何好处。 如果在脚本运行后添加了新的DOM元素，那么您仍然需要将on()事件附加到这些元素上。 直接添加所需的ui操作并放弃on()事件，同样会很好，除非我丢失了某些东西，并且出于某些其他原因需要它们。

Answer 2

要将事件绑定到动态添加的元素上：尝试通过以下方式使用on（）方法：

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

和类似的代码的可放部分。

其次，为了使droppable起作用：为什么不在可拖放部分中使用与可拖动中相同的模式？ 因此，以这种方式调用droppable：

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

因此，直接使用droppable（）方法代替drop事件。