Jquery UI可排序的portlet：切换两个portlet的位置

我对JQuery UI非常陌生，不太熟悉如何使用选项，方法和事件。我正在使用JQuery UI可排序portlet（示例为here），我正在做的与示例非常相似，我有3列，但每列只有1个portlet。Jquery UI可排序的portlet：切换两个portlet的位置

（here is a fiddle），这是它的基本HTML：

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

我希望发生的是小门户切换或交换的地方放置在不同的列（因此portlet中已经存在的时候列当前拖动的portlet进入拖动的portlet来自的位置。）

我的研究将我带到similar question没有答案，但是我还没有找到任何地方的这个问题的答案。

我知道有关于Jquery UI可排序选项，方法和事件的文档（找到了here）。我认为这是我的问题可以解决的地方，我的困境是我对这些事情很陌生，不确定从哪里开始或从哪里开始。我对于应该使用什么事件有一定的了解，但不知道如何使用它们。

我认为over event会很有用，因为我的理解是它会告诉我们一个portlet已经被拖动到一个新列。与over事件一起发送的ui对象具有一个属性发送者，它告诉我们portlet来自何种排序;那个可排序的应该是已经在当前拖动的portlet刚进入的列中的另一个portlet的目的地。我也认为ui.item属性也是有用的，所以如果你能得到列中的jquery对象，你可以知道哪一个最近被添加，哪个已经存在。

这是据我所知。

您的回答将不胜感激。 :)

来源

2013-08-16 John

嘿，我在姐姐的帮助下发现了它！

var beforeDiv; 
$(".column").sortable({ 
    connectWith: ".column", 
    start: function (event, ui) { 
     beforeDiv = ui.item.closest('div.column'); 
    }, 
    beforeStop: function (event, ui) { 
     var afterDiv = ui.item.closest('div.column'); 

     beforeDiv.prepend(afterDiv.find(".portlet").not(".ui-sortable-placeholder").not(ui.item)); 
    } 
});

这里是小提琴：http://jsfiddle.net/FXrzN/45/

来源

2013-08-16 23:07:16 John

但是，如果你有一个3栏布局，并在每列只有2个portlet可以放在哪里？ – Ajey

我有一个类似的问题，请看看http://stackoverflow.com/questions/38367737/jquery-ui-sortable-portlets-with-fixed-body-height-and-portlet-switching – Ajey

Jquery UI可排序的portlet：切换两个portlet的位置

回答

相关问题