如何在jsPlumb上创建特定的可拖动区域

Question

我想让我的项目只在特定区域可拖动。这是我的屏幕的screenshot。现在，当我双击查询列表中的一行时，会在流程图区域中创建一个新项目。所以，我想让这些项目只在这个区域拖拽。这是我的HTML代码:( <div id=flowchart是我希望它们可以拖动的地方）

    

    <div class="row-fluid">
        <div class="span4">

            <div id="flowchart-left-panel">

                <div id ="queries">
                    <h3>Queries</h3>
                    <select class="flowchart-select" id="query-list" size="20">
                    </select>
                </div>
                <div id="filters">
                    <h3>Filters</h3>
                    <select class="flowchart-select" id="filter-list" size="10">
                    </select>
                </div>
            </div>
        </div>

        <div class="span8">
            <h3>Flowchart Editor</h3>
            <div id="flowchart">

            </div>

        </div>

    </div>

</div>

这是我的javascript代码：

$(document).on('dblclick', '.qqq', function() {


    var newState = $('<div>').attr('id', this.text).addClass('shape');
    var title = $('<div>').addClass('title').text(this.text);
    var connect = $('<div>').addClass('ep');


    newState.append(title);
    newState.append(connect);


    $('#flowchart').append(newState);

    jsPlumb.draggable($("#"+this.text), {
      containment:parent
    });
    jsPlumb.draggable(newState);
    jsPlumb.makeSource(newState, {
           filter:".ep",
           anchor:"Continuous",
           connector:[ "Flowchart", { stub:[10, 20], gap:5, cornerRadius:5, alwaysRespectStubs:true } ],
           connectorStyle:{ strokeStyle:"#5c96bc", lineWidth:2, outlineColor:"transparent", outlineWidth:4 },
           maxConnections:1,
           onMaxConnections:function(info, e) {
               alert("Maximum connections (" + info.maxConnections + ") reached");
           }
       });

    jsPlumb.makeTarget(newState, {
        dropOptions:{ hoverClass:"dragHover" },
        anchor:"Continuous",
    });

});