27
我想要一個可排序的列表，但我也希望該列表中的元素可以放到我已定義爲可放置的div中。我似乎無法找到辦法做到這一點。有任何想法嗎？jQuery可排序和可丟棄
A
回答
21
下面是科林解決方案的簡化版本。
最大的區別在於此解決方案不會存儲可排序元素的整個html，而只存儲當前拖動的項目。如果物品落在可投放區域，則將其插入原始位置。
總之，這裏的代碼：
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var dropped = false;
var draggable_sibling;
$("#sortable").sortable({
start: function(event, ui) {
draggable_sibling = $(ui.item).prev();
},
stop: function(event, ui) {
if (dropped) {
if (draggable_sibling.length == 0)
$('#sortable').prepend(ui.item);
draggable_sibling.after(ui.item);
dropped = false;
}
}
});
$(".droppable").droppable({
activeClass: 'active',
hoverClass:'hovered',
drop:function(event,ui){
dropped = true;
$(event.target).addClass('dropped');
}
});
});
</script>
<style type="text/css">
#sortable li{
clear:both;
float:left;
}
.droppable {
clear:both;
height:300px;
width:400px;
background-color:#CCC;
}
.droppable.active { background: #CFC; }
.droppable.hovered { background: #CCF; }
.dropped { background: #f52; }
</style>
</head>
<body>
<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>
<div class="droppable">Drop Here</div>
<div class="droppable">Drop Here</div>
</body>
</html>
如果將項目拖入列表中的新位置，然後回落外它仍然遭受同樣的問題，因爲科林的解決方案無論是<ul>和可放開<div>。然後該項目將不會重置，但會列出列表中的最後一個位置（在Google Chrome中進行測試）。無論如何，這可以通過一些鼠標輕鬆解決，或者甚至可能是理想的行爲。
+1
在我的項目中使用了這種變體。謝謝+1 –
+0
上面的代碼http://codepen.io/tcosentino/pen/myVEEJ < - 不知道它是如何以「VEEJ」結尾的 –
+0
它真的需要保存狀態並取決於其正確性嗎？看起來有可能使用drop的鼠標事件位置/偏移值。 –
0
我已經花了一整天的時間在這方面，而且我已經接近了很多，但仍然不盡如人意。我現在有我需要的功能，但是Javascript錯誤正在被拋出。
問題是如果元素被放入droppable而不是列表中，那麼獲取可排序列表將返回到其先前的位置。目前，我正在保存html onmousedown，然後在droppable的drop函數中重寫html。這工作，但它給了我一個jQuery變量是空錯誤。誰能找到更好的解決方案？
代碼：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
var templateHtml;
$(document).ready(function(){
$("#sortable").sortable();
$("#sortable li").addClass("drop").bind('mousedown',function(){
templateHtml = $("#sortable").html();
});
$("#droppable").droppable({
activeClass: 'active',
hoverClass:'hovered',
accept:".drop",
drop:function(event,ui){
$("#sortable").sortable('destroy').html(templateHtml);
$("#sortable").sortable();
$("#sortable li").addClass("drop").bind('mousedown',function(){
templateHtml = $("#sortable").html();
});
}
});
});
</script>
<style type="text/css">
#sortable li{
clear:both;
float:left;
}
#droppable {
clear:both;
height:300px;
width:400px;
background-color:#CCC;
}
#droppable.active {
background-color:#CFC;
}
#droppable.hovered {
background-color:#CCF;
}
</style>
</head>
<body>
<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>
<div id="droppable">
Drop Here
</div>
</body>
4
據我所知，與前面的代碼我張貼的問題是可投放的下降函數得到的排序的鼠標鬆開之前調用，因爲我重寫可排序的列表正在生氣（因爲缺乏更好的條款）。這有點猜測。
看一下最終代碼：怪癖的
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
var dropped = false;
var templateHtml;
$(document).ready(function(){
setSortable();
$("#droppable").droppable({
activeClass: 'active',
hoverClass:'hovered',
accept:".drop",
drop:function(event,ui){
dropped = true;
//alert(ui.draggable.text());
}
});
});
function setSortable(){
$("#sortable").sortable({
stop:function(event,ui){
if(dropped){
$("#sortable").sortable('destroy').html(templateHtml);
dropped = false;
setSortable();
}
}
});
$("#sortable li").addClass("drop").bind('mousedown',function(){
templateHtml = $("#sortable").html();
});
}
</script>
<style type="text/css">
#sortable li{
clear:both;
float:left;
}
#droppable {
clear:both;
height:300px;
width:400px;
background-color:#CCC;
}
#droppable.active {
background-color:#CFC;
}
#droppable.hovered {
background-color:#CCF;
}
</style>
</head>
<body>
<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>
<div id="droppable">
Drop Here
</div>
</body>
噸這裏參與。
我試着在可排序的開始事件上保存#sortable html，但是在應用了所有ui-css之後調用get，並最終將列表元素放置在瘋狂的地方。所以，我需要在LI上使用mousedown函數。
setSortable在函數中，因爲停止事件重寫可排序，這是我猜的「遞歸」。不確定這裏的確切術語，但我們可以討厭地混淆。
幸運的是，在可排序停止函數之前調用droppable的drop函數，所以我能夠設置一個全局的「已丟棄」變量，用於查看元素是否被刪除。
我仍然感到驚訝，這並不容易做到，我認爲jQuery會有更好的處理它的函數。也許我錯過了什麼？
+0
請選擇我的稍微簡化的版本。 – Reimund
+0
請[編輯]並更新您的答案，而不是製作新的答案... –
0
通過使每個目標DIV都是自己的可排序結果，能夠獲得類似的最終結果。
然後，我通過connectWith使所有的排序能夠連接和共享可拖動。
喜歡的東西：
var connects = '#main_sortable, div.target';
$('#main_sortable').sortable({ connectWith: connect });
$('div').sortable({ connectWith: connect});
0
如果你可以讓你的其他可投放區域爲可排序，以及，你可以使用connectWith option有一個共同的選擇：
<div id="droppable1" class="droppable-area"></div>
<div id="droppable2" class="droppable-area"></div>
<div id="droppable3" class="droppable-area"></div>
jQuery代碼然後會是：
$('.droppable-area').sortable({ connectWith: '.droppable-area' });
這個解決方案對我來說非常合適yways。
1
不完全是你要求的，但我需要一個初始容器，其中的項目可以拖到另一個可排序的容器 - 並認爲我應該分享它。這是我如何實現它（jQuery的1.8.3）：
$("#sortable-list").sortable();
$("#initial-list div").draggable({
revert: true,
revertDuration: 0
});
$("#initial-list").droppable({
accept: ".item-selected",
drop: function(e, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
var itemInOtherList = $(this).children("#" + dropped.attr('id'));
itemInOtherList.removeClass('ui-state-disabled').draggable({ disabled: false });
dropped.remove();
}
});
$("#sortable-list").droppable({
accept: ".item-initial",
drop: function(e, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
droppedOn.append(dropped.clone()
.removeAttr('style')
.removeClass("item-initial")
.addClass("item-selected"));
dropped.animate(dropped.data().origPosition, {
complete: function() {
$(this).addClass('ui-state-disabled').draggable({ disabled: true });
}
});
}
});
的jsfiddle：http://jsfiddle.net/Muskar/dwz4mvxa/8/
相關問題
- 1. jQuery可排序丟棄本身
- 2. Jquery UI可排序 - 僅在丟棄事件時排序
- 3. jQuery可拖動和可丟棄
- 4. JQuery用戶界面 - 從可排序拖放到可丟棄
- 5. JQuery UI：取消可丟棄丟棄
- 6. 結合jQuery可排序和丟棄事件
- 7. jQuery UI可排序 - 排除項目被丟棄
- 8. JQuery可丟棄問題
- 9. jQuery UI在可排序的丟棄火災事件
- 10. jQuery UI可排序 - 允許丟棄到父項
- 11. jQuery - 操縱可排序列表中的丟棄元素
- 12. jQuery可拖拽排序，在丟棄元素上更改html
- 13. JQuery可排序的項目更改值丟棄時
- 14. 可通過事件排序獲取當前可丟棄
- 15. jQuery UI排序防止執行丟棄
- 16. jquery ui獲取可丟棄元素的ID，當丟棄物品
- 17. 如何計算可丟棄區域中的丟棄項目jquery
- 18. jQuery UI：可排序和可拖動的排序和排序
- 19. 序言丟棄排列
- 20. Jquery UI。可以隨意丟棄
- 21. 可拖動丟失所有jQuery數據後，被丟棄到一個連接的可排序
- 22. 禁用jQueryUI在某個區域中丟棄可排序項目
- 23. 當可排序丟棄時發出提示
- 24. Angularjs ui可排序 - 替換已丟棄項目的內容
- 25. jquery可排序 - 只允許在目標li中丟棄最後一個項目
- 26. 使可拖動，可丟棄div不可拖動當其他div被丟棄內
- 27. 允許將可排序項目丟棄到垃圾箱中，但沒有排序
- 28. jQuery UI可拖動附加到可排序然後放在可丟棄元素不工作
- 29. 可排序+可拖動演示 - 如何訪問丟棄的項目？
- 30. jquery可排序？
我已經提出了一個[此功能要求（http://bugs.jqueryui.com/ticket/10628 ） –