让 jQuery 可排序、可拖放和可拖动以协同工作
Posted
技术标签:
【中文标题】让 jQuery 可排序、可拖放和可拖动以协同工作【英文标题】：Getting jQuery sortable, droppable and draggable to work together 【发布时间】：2011-08-13 06:25:35 【问题描述】：我正在尝试使用 jQuery 可排序、可拖放和可拖动来协同工作。我有 3 个列表：一个断点占位符；报告行；报告组。
用户应该能够：
-
将尽可能多的占位符副本拖到“报告行”列表中
将单个“报告组”（不是克隆）一次一个地拖到“报告行”集合中（但不能反之）...直到不再有报告组。
用户应该能够对报告行列表进行排序，令人作呕。
我的问题是…… 我无法让上面的 2 号工作
旁注： 我确实尝试为此创建一个 jsFiddle，但无法让 jsFiddle 解析 jQuery 的 UI 文件……所以我必须在此处为您包含整个 html 页面……抱歉！
这是 HTML：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>DragDrop Sample</title>
<link href="Includes/Css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="Includes/javascript/jQuery/Core/jquery-1.4.4.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.core.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.widget.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.droppable.js" type="text/javascript"></script>
<script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.sortable.js" type="text/javascript"></script>
<style type="text/css">
body
font-family: Arial;
font-size: 18px;
#myDiv
width: 500px;
.item
background-color: #DDDDDD;
border: solid 1px #777777;
margin: 2px;
width: 300px;
.breakPoint
background-color: #999966;
.placeHolder
.reportRow
.reportGroup
</style>
<script type="text/javascript">
$(document).ready(function()
$("#divReportRows").sortable(
);
$("#divReportRows").droppable(
accept: '.breakPoint, .reportGroup',
drop: function(event, ui)
var item = $(ui.draggable);
if (item.hasClass('reportRow'))
return;
if (item.hasClass('placeHolder'))
item.removeClass("placeHolder");
if (item.hasClass('reportGroup'))
item.removeClass("reportGroup");
item.addClass("reportRow");
$(this).append(item.clone());
);
$("#divBreakPoint").draggable(
helper: 'clone'
);
$("#divReportGrouping div.item").draggable(
helper: 'clone'
);
);
</script>
</head>
<body>
<table>
<thead>
<tr>
<td colspan="4" style="color: #660000;">
The purpose here is to be able to:<br />
<ul>
<li>Drag cloned-copies of 'break-point' placeholders into the 'report rows' collection.</li>
<li>Drag a single entire 'report group' (not a clone) into the 'report rows' collection.</li>
<li>Once dragged, the user can re-sort 'report rows' to their hearts content.</li>
</ul>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
Report Rows
</td>
<td>
Report Groupings
</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top">
<div id="divBreakPoint" class="item breakPoint placeHolder">
<input type="hidden" name="ctl00$ContentPlaceHolder1$hidReportKey" id="ctl00_ContentPlaceHolder1_hidReportKey" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hidProjectKey" id="ctl00_ContentPlaceHolder1_hidProjectKey" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hidAsOf" id="ctl00_ContentPlaceHolder1_hidAsOf" />
<span id="ctl00_ContentPlaceHolder1_lblName">BreakPoint</span>
</div>
</td>
<td>
</td>
<td valign="top">
<div id="divReportRows">
<div class="item reportRow reportRow">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_lblName">DETAILED ENGINEERING</span>
</div>
<div class="item reportRow reportRow">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl01$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl01$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl01$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_lblName">OWNER FURNISHED MATERIALS</span>
</div>
<div class="item reportRow reportRow">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl02$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl02$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl02$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_lblName">FIELD CONSTRUCTION</span>
</div>
<div class="item breakPoint reportRow">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl03$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl03$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl03$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_lblName">BreakPoint</span>
</div>
<div class="item reportRow reportRow">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl04$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl04$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl04$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_lblName">PENDING CHANGES</span>
</div>
<div class="item breakPoint reportRow">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl05$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl05$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl05$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_lblName">BreakPoint</span>
</div>
<div class="item reportRow reportRow">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl06$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl06$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl06$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_lblName">CONTINGENCY</span>
</div>
<div class="item breakPoint reportRow">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl07$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl07$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl07$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_lblName">BreakPoint</span>
</div>
</div>
</td>
<td valign="top">
<div id="divReportGrouping">
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl00$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl00$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl00$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_lblName">CONSTRUCTION MANAGEMENT</span>
</div>
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl01$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl01$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl01$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_lblName">CONTINGENCY</span>
</div>
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl02$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl02$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl02$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_lblName">DETAILED ENGINEERING</span>
</div>
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl03$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl03$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl03$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_lblName">FEL</span>
</div>
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl04$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl04$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl04$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_lblName">FIELD CONSTRUCTION</span>
</div>
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl05$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl05$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl05$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_lblName">LUMP SUM CONTRACTS</span>
</div>
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl06$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl06$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl06$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_lblName">NRE</span>
</div>
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl07$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl07$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl07$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_lblName">OWNER FURNISHED MATERIALS</span>
</div>
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl08$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl08$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl08$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_lblName">PENDING CHANGES</span>
</div>
<div class="item reportGroup">
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl09$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_hidReportKey" value="306" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl09$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_hidProjectKey" value="869" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl09$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_hidAsOf" value="4/26/2011 12:51:04 PM" />
<span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_lblName">SCSA</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
【问题讨论】：
【参考方案1】：这是我提出的拖放/排序的有效解决方案。希望它可以帮助某人。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#DraggableList width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px; border-style:solid;
#DroppableList width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; border: 1px; border-style:solid;
</style>
<script type="text/javascript">
$(document).ready(function ()
$("#DraggableList li").draggable(
revert: 'invalid'
);
$("#DroppableList").sortable();
$("#DroppableList").droppable(
drop: function (event, ui)
// If test in place to ignore the sortable instance of the droppable function
if ($(ui.draggable).hasClass("ui-draggable-dragging"))
var itemText = $(ui.draggable).text();
$(ui.draggable).empty();
$('#DroppableList').append($('<li>').text(itemText).addClass("dropped"));
);
$('#DroppableList li').live('dblclick', function (evt)
evt.preventDefault();
$(this).remove();
);
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="ListDiv">
<ul id="DraggableList">
<li>Linebacker</li>
<li>Tackle</li>
<li>Safety</li>
<li>Cornerback</li>
<li>Guard</li>
<li>End</li>
</ul>
</div>
<div>
<ul id="DroppableList">
</ul>
</div>
</form>
</body>
</html>
【讨论】：
【参考方案2】：#2 的问题是$("#divReportGrouping div.item") 的助手应该设置为'original' 而不是克隆，而在drop 上附加到#divReportRows 的是项目本身而不是克隆。这是工作示例：http://jsfiddle.net/3zpV6/2/
【讨论】：
感谢您的帮助。但是，此解决方案的问题是，当使用“原始”时，ReportGroup 项会飞到屏幕的另一侧，直到您实际放下它……这在视觉上是不可取的。你知道怎么解决吗？ 嗨，您可以在 $("#divReportGrouping").draggable() 上添加 'revert' 选项以设置为 'invalid' 并在 stop() 上添加处理程序，如下所示： stop: function (事件, ui) ui.helper.css('position','relative'); 我尝试了 stop: 功能，但它不起作用。还有其他方法吗？ 当你说它不起作用时，它给了你什么行为？这是示例：jsfiddle.net/3zpV6/3 感谢您的回复和抱歉..我应该解释得更好！当您将 ReportGroup 拖到 ReportRow 集合中时，该项目会飞出屏幕。我“认为”你的修复（上图）会纠正这个问题……但事实并非如此。有任何想法吗？感谢您宝贵的时间！以上是关于让 jQuery 可排序、可拖放和可拖动以协同工作的主要内容，如果未能解决你的问题，请参考以下文章