bootstrap draggable panels from different columns

Question

I am having a hard time trying to create the following structure:

  <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>

The problem that I am trying to tackle is that I would like to have the panels draggable. I would like to drag and drop between the two "col-lg-x" divs. I found some demos (http://www.bootply.com/dUQiGMggWO) and it works just fine if all the panels are inside the same div and that div has the 'sortable' class plus using the javascript provided in that demo. However, if you separate the panels in different columns then what the script does is that it takes ALL the panels inside one column and tries to drag them all.

Here is a jsfiddle demo of my problem: https://jsfiddle.net/Wy22s/719/

Basically what I want is to drag and drop just one panel, not all the panels inside a column.

Answer 1

See jPanels for creating draggable and editable panels for backend content creation.

Answer 2

This is the javascript for the portet:

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

To use draggable portlets you need first to add the JQuery Sortable Plugin. Your portles needs to have this structure:

<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>

For more information look here:https://jqueryui.com/sortable/

If you wish you can use the jQueryUI Sortable API to store the portlet positions in your backend.