寻找拖放功能

Question

有人能推荐开箱即用的Drag-and -Drop框架吗？

像这样的jquery-ui示例，可以将一组小部件放到某种Dashboard布局页面上 - 例如使用照片库http://jqueryui.com/droppable/#photo-manager

我刚刚发现这个非常酷的jquery-ui和基于Bootstrap 3.0的动态布局工具叫做gridmanager - http://neokoenig.github.io/jQuery-gridmanager/

您还可以在http://neokoenig.github.io/jQuery-gridmanager/demo/

查看演示

因此，考虑到这一点，我想添加一个拖放侧边栏，这样我就可以将“小工具”放到网格系统上。

我正在使用Kendo UI以及JQWidgets，但我对如何将拖放功能集成到此网格管理器系统有点不确定。

将jquery-ui和gridmanager js / css文件添加到我的索引页面之后，代码如下所示：

  <section id="dashboard-view" class="mainbar" data-ng-controller="dashboard as vm">
 <section class="matter">

    <div id="mycanvas">
        <div class="row">
            <div class="col-md-6">
                <p>Content</p>
            </div>
            <div class="col-md-6">
                <p>Content</p>
            </div>
        </div>
    </div>

</section>
</section>
 <script>
   $(document).ready(function () {        

     var gm = $("#mycanvas").gridmanager({   // fluid widths
        controlPrepend: "<div class='row-fluid'><div class='col-md-12'><div id='gm-addnew' class='btn-group '>",
        rowClass: "row-fluid",
        rowSelector: "div.row-fluid",
        rowPrepend: "<div class='row-fluid gm-editing'>"
    });

    $(".myexternalcontrol").on("click", function (e) {
        // Example use of internal gridmanager function:
        gm.appendHTMLSelectedCols('<p>my content to append to all my selected cols</p>');
    });
});
 </script> 

同样，我想设置一个侧边栏或顶部的小部件，可以拖到下面的每个网格部分（参见屏幕截图）。

以下是我在测试版网站上呈现的屏幕截图。

请事先提出建议。

的问候，

鲍勃

Answer 1

我是gridmanager.js的作者之一。首先，gridmanager需要jqueryUI，因此您已经在页面上获得了拖放功能。但是，GM已经在使用可拖动/可排序的jqueryUI功能，因此请注意，您可能会遇到一些冲突。

GM实际上创建了很多临时标记（然后在预览/保存时删除它） - 看一下生成的源代码 - 你会看到类“gm-editable-region”的div - 可能值得试图使该类成为“可放置”区域（即，其他东西可以放在它上面）。你可能必须扩展gridmanager的activateCols函数，以便在它完成预览过程时“重新激活”可放置区域。

祝你好运 - github问题队列在这里https://github.com/neokoenig/jQuery-gridmanager/issues