javascript - jQuery UI可拖动/可拖动

我在激活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（）{...}）包围脚本，也没有任何效果。

我很茫然，不胜感激。

最佳答案

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

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

关于javascript - jQuery UI可拖动/可拖动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13313434/