bootstrap 来自不同列的可拖动面板

Question

我很难尝试创建以下结构：

  <div class="row">
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          Panel1!
        </div>          
      <div class="panel-body">
        Body Test
      </div>
    </div>

    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          Panel2!
        </div>          
      <div class="panel-body">
        Body Test
      </div>
    </div>
  </div>

我要解决的问题是我想让面板可以拖动。我想在两个 "col-lg-x" div 之间拖放。我找到了一些演示 (http://www.bootply.com/dUQiGMggWO)，如果所有面板都在同一个 div 内并且 div 具有 'sortable' class 加上使用该演示中提供的 javascript。但是，如果您将面板分隔在不同的列中，那么脚本所做的是将所有面板放在一列中并尝试将它们全部拖动。

这是我的问题的 jsfiddle 演示：https://jsfiddle.net/Wy22s/719/

基本上我想要的是只拖放一个面板，而不是一列中的所有面板。

Answer 1

要使用可拖动的 portlet，您首先需要添加 JQuery 可排序插件。您的 portle 需要具有以下结构：

<div class="row" id="sortable_portlets">
                    <div class="col-md-4 column sortable">
                        <div class="portlet portlet-sortable light bordered">
                            <div class="portlet-title">
                                <div class="caption font-green-sharp">
                                    <i class="icon-speech font-green-sharp"></i>
                                    <span class="caption-subject bold uppercase"> Portlet</span>
                                    <span class="caption-helper">details...</span>
                                </div>
                                <div class="actions">
                                    <a href="javascript:;" class="btn btn-circle btn-default btn-sm">
                                    <i class="fa fa-plus"></i> Add </a>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div class="scroller" style="height:200px" data-rail-visible="1" data-rail-color="yellow" data-handle-color="#a1b2bd">
                                    <h4>Heading Text</h4>
                                    <p>
                                         Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                                    </p>
                                    <p>
                                         nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="portlet portlet-sortable light bg-inverse">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-paper-plane font-green-haze"></i>
                                    <span class="caption-subject bold font-green-haze uppercase">
                                    Input </span>
                                    <span class="caption-helper"></span>
                                </div>
                                <div class="actions">
                                    <div class="portlet-input input-inline input-small">
                                        <div class="input-icon right">
                                            <i class="icon-magnifier"></i>
                                            <input type="text" class="form-control input-circle" placeholder="search...">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <h4>Heading text goes here...</h4>
                                <p>
                                     Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis.
                                </p>
                            </div>
                        </div>
                        <div class="portlet portlet-sortable box green-haze">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-gift"></i>Portlet
                                </div>
                                <div class="actions">
                                    <a href="javascript:;" class="btn btn-default btn-sm">
                                    <i class="fa fa-pencil"></i> Edit </a>
                                    <a href="javascript:;" class="btn btn-default btn-sm">
                                    <i class="fa fa-plus"></i> Add </a>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <h4>Heading Text</h4>
                                <p>
                                     Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
                                </p>
                            </div>
                        </div>
                        <!-- empty sortable porlet required for each columns! -->
                        <div class="portlet portlet-sortable-empty">
                        </div>
                    </div></div>

有关更多信息，请查看此处：https://jqueryui.com/sortable/

如果您愿意，可以使用 jQueryUI Sortable API 在后端存储 portlet 位置。

Answer 2

这是 javascript 的门户：

var PortletDraggable = function () {

return {
    //main function to initiate the module
    init: function () {

        if (!jQuery().sortable) {
            return;
        }

        $("#sortable_portlets").sortable({
            connectWith: ".portlet",
            items: ".portlet", 
            opacity: 0.8,
            coneHelperSize: true,
            placeholder: 'portlet-sortable-placeholder',
            forcePlaceholderSize: true,
            tolerance: "pointer",
            helper: "clone",
            tolerance: "pointer",
            forcePlaceholderSize: !0,
            helper: "clone",
            cancel: ".portlet-sortable-empty, .portlet-fullscreen", // cancel dragging if portlet is in fullscreen mode
            revert: 250, // animation in milliseconds
            update: function(b, c) {
                if (c.item.prev().hasClass("portlet-sortable-empty")) {
                    c.item.prev().before(c.item);
                }                    
            }
        });
    }
};

}();

Answer 3

请参阅 jPanels 了解如何为后端内容创建创建可拖动和可编辑的面板。

bootstrap 来自不同列的可拖动面板

bootstrap draggable panels from different columns

jquery

jquery-ui

draggable

twitter-bootstrap