самонастройки перетаскивать панели из разных столбцов

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 имеет «сортируемый» класс плюс использование javascript, предоставленного в этой демонстрации. Однако, если вы отделяете панели в разных столбцах, то что делает скрипт, так это то, что он принимает ВСЕ панели внутри одного столбца и пытается перетащить их все.

Вот jsfiddle демо моей проблемы: https://jsfiddle.net/Wy22s/719/

В основном то, что я хочу, чтобы перетащить только одна панель, а не все панели внутри колонки.

Answer 1

Чтобы использовать перетаскиваемые портлеты, вам нужно сначала добавить 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/

Если вы хотите, вы можете использовать API jQueryUI Сортируемого для хранения позиции портлетов в вашем внутреннем интерфейсе.

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 для создания перетаскиваемых и редактируемых панелей для создания содержимого бэкэнд.