jquery - 需要js Backbone 和 jqueryui

Question

我在主干中有一个应用程序，当我单击应用程序外部的元素时，我会在一个 div 内创建另一个可以拖动和调整大小的 div。 我已经尝试过:

我的requirejs配置文件:

require.config({
    paths:{
        jquery:'libs/jquery/jquery-2.0.2.min',
        underscore:'libs/underscore/underscore-min',
        backbone:'libs/backbone/backbone-min',
        text:'libs/require/text',
        jquery_ajaxform  : 'libs/jquery/jquery.form',
        jquery_ui  : 'libs/jquery/jquery-ui-1.10.3.custom.min'     
    },
    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    }
});

require(['views/design'], function(DesignView){
    var designView = new DesignView();
});

我的设计 View :

define(['jquery' , 
        'backbone', 
        'jquery_ui',
        'models/design', 
        'collections/design', 
        'views/element',
        "text!templates/design.html"
        ], 
    function($, Backbone, jQueryUI, DesignModel, DesignCollection, ElementView, tmplDesign){
    var DesignView = Backbone.View.extend({
        initialize: function(){
            this.$el = $('#layout');
            this.template = tmplDesign;
            console.log('initialize DesignView');
            this.collection = new DesignCollection();
            var here = this;
            $('#insert-dynamic-element').click(function(){
                var element = { name:'img', type:'image' };
                here.collection.addElement(element);
                here.render();
                $('.drag-item').draggable({"containment" : "parent"})
            });
        },
        render: function(){
            var template = _.template(this.template, {elements:this.collection.toJSON()});
            this.$el.empty();
            this.$el.append(template);
        }
    })

    return DesignView;
});

模板:

<%
 _.forEach(elements, function (element, index) { 
    if(element.type == 'image'){
        console.log('fai');
    %>
    <p>fsfdsfds</p>
        <div class="insert-container-img drag-item">
            <p>IMG</p>
        </div>
    <%
    }
}); %>

我检索到此错误:

Uncaught TypeError: Object [object Object] has no method 'draggable'

我认为错误是因为 div 元素是动态创建的。
那么如何为我的 div 关联可拖动和可调整大小呢？ 谢谢

Answer 1

您需要为 jquery-ui 定义一个 shim，因为它不是 AMD 模块并且依赖于 jQuery。

shim: {
  //...
  jquery_ui: {
    exports: '$',
      deps: ['jquery']
   }
}