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>

我想要解决的问题是我希望这些面板可以拖动。我想在两个＆＃34; col-lg-x＆＃34;之间拖放。 div的。我发现了一些演示（http://www.bootply.com/dUQiGMggWO），如果所有面板都在同一个div中并且div具有可排序的＆＃39;它可以正常工作。 class plus使用该demo中提供的javascript。但是，如果您在不同的列中分隔面板，那么脚本的作用是将一个列中的所有面板都占用并尝试将它们全部拖动。

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

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

Answer 1

要使用可拖动的portlet，首先需要添加JQuery Sortable Plugin。您的portles需要具有以下结构：

<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

这是portet的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，了解如何为后端内容创建创建可拖动和可编辑的面板。

来自不同列

3 个答案: