修改可排序的JQuery UI Portlet以水平拖动

Question

可以编程哪些额外的jquery函数来使portlet /小部件在更宽的列中水平移动（默认方式只允许在自己的列中垂直丢弃portlet，但如果列加宽则不允许水平移动）因此列可以允许水平下降？

我想让用户将玩家卡片拖放到他们选择的相关团队类别/ div中，叠加在一起，就像下面的原始示例所示：

类别1

| card 1   card 2   card 3   etc   etc |

第2类

| card 4   card 5   card 6   etc   etc |

类别3

| card 10   card 12   card 13   etc   etc |

etcetera etcetera ....

我希望在我的页面中实现的jquery UI提供一个片段

＆＃13;

＆＃13;

$(function() {
   $(".column").sortable({
     connectWith: ".column",
     handle: ".portlet-header",
     cancel: ".portlet-toggle",
     placeholder: "portlet-placeholder ui-corner-all"
   });

   $(".portlet")
     .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
     .find(".portlet-header")
     .addClass("ui-widget-header ui-corner-all")
     .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

   $(".portlet-toggle").click(function() {
     var icon = $(this);
     icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
     icon.closest(".portlet").find(".portlet-content").toggle();
   });
 });

＆＃13;

body {
    min-width: 520px;
    font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 62.5%;
  }
  .column {
    width: 170px;
    float: left;
    padding-bottom: 100px;
  }
  .portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
  }
  .portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
  }
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  .portlet-content {
    padding: 0.4em;
  }
  .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  }

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="column">

  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>

<div class="column">

  <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>

<div class="column">

  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>

<div class="column">

  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>

<div class="column">

  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;