1

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

我很茫然，希望能提供一些意见。

4

2 回答 2

1

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

没错，您需要确保在任何初始 DOM 修改 JS 之后执行可拖放的 js。我不相信致电draggable()或droppable()使用该on()活动可以为您购买任何东西。如果在脚本运行后添加了新的 DOM 元素，那么您仍然需要将on()事件附加到这些元素。您最好直接附加所需的 ui 操作并放弃该on()事件，除非我遗漏了某些内容并且您出于其他原因需要它们。

于 2012-11-09T18:59:54.087 回答
0

将事件绑定到动态添加的元素上：尝试以这种方式使用 on() 方法：

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

代码的可删除部分也类似。

其次，为了让 droppable 工作：为什么不在代码的 droppable 部分使用与在 draggable 中使用的相同的模式？所以以这种方式调用 droppable：

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

所以直接使用 droppable() 方法而不是 drop 事件。

于 2012-11-09T19:29:11.747 回答