javascript - 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() 激活社区的原因是允许用户动态添加更多社区。我对这段代码遇到的问题是，draggables 和 droppables 都不会被它激活，但是当我移动到控制台并使用 $('.draggable a').draggable() 激活draggables时，它们会被激活。

我猜测这个问题是由于JQuery执行后加载html元素造成的。我将 JQuery 移动到页面末尾并用 $(document).ready(function(){...}) 包围它，但没有效果。然后用 $(window).bind("load", function() {...}) 包围脚本，也没有效果。

我很茫然，希望得到一些意见。

Answer 1

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

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