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会产生错误，这可能是您的droppable和draggable元素未激活的原因。这是一个例子，jsfiddle。它并不漂亮，它没有考虑Bootstrap或Jinja2，但它展示了你的目标。

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

Answer 2

用于绑定动态添加元素上的事件：尝试以这种方式使用on（）方法：

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

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

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

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

因此直接使用droppable（）方法而不是drop事件。

JQuery UI Draggable / Droppable

2 个答案: