我有一个设计,我有一个"可用的盒子"列表,用户通过将它们从"可用的盒子"列表拖到他们的"我的盒子"列表来获取盒子.
用户通常一次多取多个盒子(最多20个),一旦他们完成盒子,他们将它们拖回"可用盒子"列表以返回它们.
jQuery sortable允许我一次拖动一个框,从用户的角度来看是不合需要的.我一直无法想出这个问题的简单解决方案.
我可能必须完全提出一种不同的UI方法,但首先是否有人对如何实现这一点有任何建议？
谢谢!
我们可以使用在每个li中使用的id或idx在运行时对jquery进行排序.我希望它在运行时排序
这里是小提琴.我希望它自动排序,例如<li id=1>应该先来<li id=2>等等.帮助将不胜感激,因为我是新手试图学习jquery.
这是HTML:
<div class="demo" style="width:444px">
<ul id="sortable">
<li itemID=3 id='3' class="ui-state-default">3<button>delete</button></li>
<li itemID=6 id='6' class="ui-state-default">6<button>delete</button></li>
<li itemID=1 id='1' class="ui-state-default">1<button>delete</button></li>
<li itemID=4 id='4' class="ui-state-default">4<button>delete</button></li>
<li itemID=9 id='9' class="ui-state-default">9<button>delete</button></li>
<li itemID=2 id='2' class="ui-state-default">2<button>delete</button></li>
<li itemID=8 id='8' class="ui-state-default">8<button>delete</button></li>
<li itemID=5 id='5' class="ui-state-default">5<button>delete</button></li>
<li itemID=11 id='11' class="ui-state-default">11<button>delete</button></li>
<li itemID=7 id='7' class="ui-state-default">7<button>delete</button></li>
<li itemID=10 id='10' class="ui-state-default">10<button>delete</button></li>
<li itemID=12 id='12' class="ui-state-default">12<button>delete</button></li>
</ul>
</div><!-- End demo -->
这是JS:
$(function() {
$( "#sortable" ).sortable();
$(":button").click(function(){
$(this).parent().remove();
var arr=$("#sortable").sortable('toArray');
text=arr.toString();
alert(text); …我正在尝试使用jQuery UI的Sortable插件设置一种同时对多个项目进行排序的方法.我已经提出了一个部分解决方案,其中检查的项目与拖动一起,但我不能让他们全部移动位置.这就是我所拥有的:http://jsbin.com/ecela
我需要添加什么来确保项目移动到新位置并在拖动开始时删除.
此外,我想知道是否有一种方法可以使用可选择和可排序.我猜测不是因为它们都要求你点击要选择的项目并对它们进行拖动/排序.
我有以下代码,允许用户从一个列表拖放到另一个列表.现在,我如何允许用户选择并拖放多个项目？
像这样的东西？ http://jsfiddle.net/T68Fn/
我试图将jsfiddle中的代码合并到一起,但是无法真正实现它.任何帮助都非常感谢.
请帮帮我.非常感谢你.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="maincontainer">
<div id="navtoplistline"> </div>
<div id="contentwrapper">
<div id="maincolumn">
<div class="text">
<hr />
<div class="listBlock">
<h2>Available</h2>
<ul id="sortable1" class='droptrue'>
<li class="ui-state-default" id="article_1">Article #1</li>
<li class="ui-state-default" id="article_2">Article #2</li>
<li class="ui-state-default" id="article_3">Article #3</li>
</ul>
</div>
<div class="listBlock">
<h2>My Articles</h2>
<ul id="sortable2" class='droptrue'></ul>
</div>
<br clear="both" />
<p>Which articles, in which order?:
<br />
<input type="text" id="postOrder" name="postOrder" value="" size="30" />
</p>
</div> …