我有两个连接列表,每个列表都在一个 Jquery UI 选项卡中。我希望通过选项卡连接列表,以便将li元素从一个ul列表拖放到选项卡名称应将li元素附加到目标ul列表。
我已经能够通过标签 Jquery tutorial 使用带有连接列表的 JQuery 在一定程度上做到这一点,但是我无法在drop事件上构造我需要的回调函数。
回调需要 (a) 识别可拖动项目的 id,(b) 基于它被放置在哪个可放置选项卡上的目标列表,以及 (c) 通过 GET/POST 将两者发送到 PHP 脚本,这将执行数据库交互(将项目从一个数据库表移动到另一个)。
这是我目前使用的 JQuery(第一部分处理sortable1和sortable2的内部排序):
$(function() {
$("#sortable1").sortable({
items: 'li:not(.ui-state-disabled)',
opacity: 0.6,
cursor: 'move',
connectWith: '.connectedSortable',
update: function() {
var order1 = $(this).sortable("serialize");
$.get("updatedb.php?p=masterlist", order1, function(data){
});
},
});
$("#sortable2").sortable({
items: 'li:not(.ui-state-disabled)',
opacity: 0.6,
cursor: 'move',
connectWith: '.connectedSortable',
update: function() {
var order2 = $(this).sortable("serialize");
$.get("updatedb.php?p=offline", order2, function(data){
});
},
});
var $tabs = $( "#tabs" ).tabs();
$("#tabs").droppable({
accept: ".connectedSortable li",
drop: function(ev, ui) {
}
});
(drop even 回调是空的,因为到目前为止我的尝试都没有奏效。)
这是列表的 html 输出:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
</ul>
<div id="tabs-1">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
<div id="tabs-2">
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>
</div>
任何有关此问题的帮助将不胜感激。谢谢。
编辑:
解决了,像这样:
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $id = ui.draggable.attr('id');
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "fast", function() {
$tabs.tabs( "select", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "fast" );
});
var $listname = $list.attr('id');
$.get("tester.php", {list:$listname, id:$id}, function(data){
});
}
});
});