在此标准示例中 http://jqueryui.com/demos/sortable/#connect-lists-through-tabs
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "select", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
</script>
当您向拳头列表添加如何运行接收方法时,我添加到数据库并在您向后移动时删除
答案 0 :(得分:2)
这取决于你的后端编码的内容。例如,如果你使用的是php,你可能想使用jQuery来进行AJAX调用:
jQuery(document).ready(function ($) {
$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
/* Then over here, you can make your AJAX post to your .php file */
$.ajax({
type: "POST",
url: "saveorder.php",
data: "list=" + list
});
ui.draggable.hide( "slow", function() {
$tabs.tabs( "select", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
然后,如果你的PHP文件,你输入这样的东西:
<?php if (isset($_POST['list'])) {
$list_order = $_POST['list']; // Clean the data first though.
mysql_query("INSERT INTO list_order (order) VALUES ('$list_order')");
} ?>
这样的事情。希望它有所帮助:)