<meta charset="utf-8">
<style>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
<div class="demo">
<ul id="sortable1" class="connectedSortable">
<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>
<ul id="sortable2" class="connectedSortable">
<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><!-- End demo -->
<div class="demo-description">
<p>
Sort items from one list into another and vice versa, by passing a selector into
the <code>connectWith</code> option. The simplest way to do this is to
group all related lists with a CSS class, and then pass that class into the
sortable function (i.e., <code>connectWith: '.myclass'</code>).
</p>
</div><!-- End demo-description -->
connect-lists-through-tabs.html
<meta charset="utf-8">
<style>
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<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>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</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>
</div><!-- End demo -->
<div class="demo-description">
<p>Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.</p>
</div><!-- End demo-description -->
分享到:
相关推荐
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
<link rel="stylesheet" type="text/css" href="${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" > <script type="text/javascript" src="${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"></script> ...
jquery-ui-1.11.4完整版
jquery-ui.min.js 1.8.5
jquery-sortable-lists, 用于排序列表的jQuery插件还包括树结构 jquery-sortable-lists用于排序列表的插件还包括树结构。$('#myList').sortableLists( options );你可以通过鼠标对html列表的项进行排序。 创建树结构...
We've included and linked to minified versions of jQuery, your personalized copy of jQuery UI (js/jquery-ui-1.8.4.custom.min.js), and css/ui-lightness/jquery-ui-1.8.4.custom.css which imports the ...
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
JQuery UI/API/1.7 中文帮助文档 jQuery UI Draggable 概述 jQuery UI Draggable 插件可以使被选择的元素随着鼠标移动实现拖动. 可拖动的元素得到一个ui-draggable类. 拖动中的元素始终得到ui-draggable-dragging...
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ text-...
jquery.ui.datepicker-zh-CN.js
含下述资源: jquery-1.8.2.js jquery-1.8.2.min.js jquery-1.8.2-vsdoc.js jquery.cookie.js jquery1.8.2.chm
<script src="./public/js/jquery-ui-1.10.3.min.js"></script> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet">...
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
We've included and linked to minified versions of jQuery, your personalized copy of jQuery UI (js/jquery-ui-1.8.21.custom.min.js), and css/humanity/jquery-ui-1.8.21.custom.css which imports the ...
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
jquery-ui+jquery-ui-rails
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/hot-sneaks/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> ...
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or ...
jQuery.UI.1.7.jQuery最全的用户界面库