Có ai biết cách kết hợp giao diện người dùng jQuery có thể chọn và sắp xếp không? Tập lệnh này: http://nicolas.rudas.info/jquery/selectables_sortables/ không hoạt động trong Chrome và cũng có các sửa đổi plugin.Giao diện người dùng jQuery có thể sắp xếp và có thể chọn
Trả lời
Chỉ cần tìm thấy giải pháp this rất dễ dàng từ rdworth:
CSS:
ul { width: 300px; list-style: none; margin: 0; padding: 0; }
li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
.ui-selecting { background: #eee; }
.ui-selecting .handle { background: #ddd; }
.ui-selected { background: #def; }
.ui-selected .handle { background: #cde; }
HTML:
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Javascript:
$("#list")
.sortable({ handle: ".handle" })
.selectable({ filter: "li", cancel: ".handle" })
.find("li")
.addClass("ui-corner-all")
.prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>");
Xem: this fiddle.
Tìm kiếm tuyệt vời. Cảm ơn bạn. –
Điều này hoạt động khá tốt.Tôi đã phải vượt qua các tùy chọn này để có thể lựa chọn để nó không xử lý các xử lý như các đối tượng có thể lựa chọn riêng biệt, và không bắt đầu lựa chọn khi kéo chúng: '{filter: 'li', cancel: '.handle'}' – Nick
@ Nick: thêm đề xuất của bạn – mhu
Điều này cũng giống như tôi có thể cho u :) nhưng ý tưởng ở đó. nó không phải là alllll hoàn chỉnh nhưng hy vọng u có thể chơi về với các giá trị và xem nó như thế nào đi từ đó :)
Một phần của cơ sở jQuery-arsenal của tôi bao gồm như sau, vì nó thường gây phiền nhiễu khi bạn đi để kéo một cái gì đó và cuối cùng chọn văn bản để thay thế ...
// disables text selection on sortable, draggable items
$(".sortable").sortable();
$(".sortable").disableSelection();
Không chắc chắn nếu bạn chỉ có thể lật "tắt" để "bật", nhưng có $ 0,02 của tôi. Mặc dù không thử nó .. cảm giác thông thường cho thấy rằng bạn có thể cần phải xác định một phần không hoạt động trong cùng một phần tử "nhóm", để cung cấp "xử lý" cho hành động kéo .... hoặc những nhấp chuột khác có thể bị nhầm lẫn một cách không ngừng ý định chọn/chỉnh sửa ...
Hãy thử điều này. Bạn có thể sử dụng Ctrl + Click
cho đa lựa chọn và sắp xếp
Vui lòng thêm các phần có liên quan của mã vào câu trả lời ... –
Nếu bạn muốn chọn nhiều yếu tố và di chuyển tất cả vào danh sách khác, điều này fiddle hoạt động tốt:
HTML:
<meta charset="utf-8" />
<title>jQuery UI Sortable with Selectable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<ul id="album" class="connectedSortable">
<li id="li1"><div>1- First</div></li>
<li id="li2"><div>2- Second</div></li>
<li id="li3"><div>3- Third</div></li>
<li id="li4"><div>4- Fourth</div></li>
<li id="li5"><div>5- Fifth</div></li>
<li id="li6"><div>6- Sixth</div></li>
<li id="li7"><div>7- Seventh</div></li>
<li id="li8"><div>8- Eighth</div></li>
</ul>
<ul id="album2" class="connectedSortable">
<li id="li1"><div>1- 1</div></li>
<li id="li2"><div>2- 2</div></li>
<li id="li3"><div>3- 3</div></li>
<li id="li4"><div>4- 4</div></li>
<li id="li5"><div>5- 5</div></li>
<li id="li6"><div>6- 6</div></li>
<li id="li7"><div>7- 7</div></li>
<li id="li8"><div>8- 8</div></li>
</ul>
<div id="anotheralbum" class="connectedSortable">
another album - no style for the lists inside here
</div>
<br style="clear:both">
</body>
Javascript:
<script>
$(function() {
//
$('body').selectable({
filter: 'li'
//filter: '#album2 > li'
});
/*
Since the sortable seems unable to move more than one object at a
time, we'll do this:
The LIs should act only as wrappers for DIVs.
When sorting a LI, move all the DIVs that are children of selected
LIs to inside the sorting LI (this will make them move together);
but before doing that, save inside the DIVs a reference to their
respective original parents, so we can restore them later.
When the user drop the sorting, restore the DIVs to their original
parent LIs and place those LIs right after the just-dropped LI.
Voilá!
Tip: doesn't work so great if you try to stick the LIs inside the LI
*/
$('.connectedSortable').sortable({
connectWith: ".connectedSortable",
delay: 100,
start: function(e, ui) {
var topleft = 0;
// if the current sorting LI is not selected, select
$(ui.item).addClass('ui-selected');
$('.ui-selected div').each(function() {
// save reference to original parent
var originalParent = $(this).parent()[0];
$(this).data('origin', originalParent);
// position each DIV in cascade
$(this).css('position', 'absolute');
$(this).css('top', topleft);
$(this).css('left', topleft);
topleft += 20;
}).appendTo(ui.item); // glue them all inside current sorting LI
},
stop: function(e, ui) {
$(ui.item).children().each(function() {
// restore all the DIVs in the sorting LI to their original parents
var originalParent = $(this).data('origin');
$(this).appendTo(originalParent);
// remove the cascade positioning
$(this).css('position', '');
$(this).css('top', '');
$(this).css('left', '');
});
// put the selected LIs after the just-dropped sorting LI
$('#album .ui-selected').insertAfter(ui.item);
// put the selected LIs after the just-dropped sorting LI
$('#album2 .ui-selected').insertAfter(ui.item);
}
});
//
});
</script>
CSS:
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#album {
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
}
#album2 {
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
}
#album li {
float: left;
margin: 5px;
}
#album2 li {
float: left;
margin: 5px;
}
#album div {
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
}
#album2 div {
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
}
#album .ui-sortable-placeholder {
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
}
#album2 .ui-sortable-placeholder {
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
}
#album .ui-selecting div,
#album .ui-selected div {
background-color: #3C6;
}
#album2 .ui-selecting div,
#album2 .ui-selected div {
background-color: #3C6;
}
#anotheralbum {
list-style: none;
float: left;
width: 20%;
height: 800px;
border: 1px solid blue;
}
</style>
này đã được sửa đổi từ ví dụ ở http://www.pieromori.com.br/snippets/sortable_with_selectable.html nhờ Piero Mori.
- 1. Giao diện người dùng Jquery kết hợp có thể sắp xếp và có thể kéo
- 2. Giao diện người dùng jQuery có thể sắp xếp: Di chuyển bản sao nhưng giữ nguyên
- 3. Giao diện người dùng Jquery, "vùng chết" với các portlet có thể sắp xếp
- 4. Giao diện người dùng jQuery: có thể sắp xếp ('toArray') trả về một mảng trống
- 5. Vị trí có thể sắp xếp giao diện người dùng jQuery
- 6. Cách sắp xếp theo thứ tự bảng chữ cái một giao diện người dùng JQuery có thể sắp xếp được?
- 7. Làm thế nào để loại bỏ giao diện người dùng jQuery có thể sắp xếp từ một phần tử?
- 8. Bật Shift-Multiselect trong giao diện người dùng jQuery Có thể chọn
- 9. Giao diện người dùng jQuery Sắp xếp và: con trỏ chuột hoạt động để xử lý
- 10. sắp xếp enum cho mục đích giao diện người dùng
- 11. Giao diện người dùng jQuery Sắp xếp sự kiện dừng sau khi kéo và thả
- 12. Giao diện người dùng Kendo và giao diện người dùng jQuery - kích thước và khung javascript
- 13. Plugin giao diện người dùng JQuery Có thể chọn: Làm cho thanh cuộn không thể chọn khi div tràn qua
- 14. Làm cho hàng của bảng hoạt động trở lên trong giao diện người dùng có thể sắp xếp
- 15. Giao diện người dùng jQuery Sắp xếp: Cuộn toàn bộ trang cũng như vùng chứa
- 16. Có thể sắp xếp w/Văn bản có thể chọn
- 17. Giao diện người dùng jQuery: Sắp xếp: Bản sao trình giữ chỗ của mục đang được sắp xếp
- 18. Sắp xếp + danh sách lồng nhau với giao diện người dùng jQuery 1.8.2
- 19. Giao diện người dùng jQuery Sắp xếp được đặt theo cách thủ công một vị trí
- 20. Jquery có thể sắp xếp ('serialize')
- 21. CSS UI không có giao diện người dùng jQuery cdn
- 22. Giao diện người dùng JQuery có thể sắp xếp chậm trong IE8, nhưng hoạt động tốt ở chế độ tương thích IE7 và IE8
- 23. jQuery UI có thể sắp xếp và backbone.js
- 24. Tải lên + Giao diện người dùng jQuery
- 25. Tại sao chỉ có thể chỉ chuỗi giao diện người dùng trong Android cập nhật giao diện người dùng?
- 26. Làm cách nào để tạo các div có thể sắp xếp giao diện người dùng jQuery được kéo chỉ từ một biểu tượng?
- 27. Tôi có thể lấy thêm các chủ đề giao diện người dùng jQuery ở đâu?
- 28. Ghim có thể thay đổi kích thước giao diện người dùng jQuery
- 29. Giao diện người dùng JQuery có thể kéo được: Vượt quá ngăn chặn ở một bên
- 30. Giao diện người dùng JQuery Có thể kéo được - Cách biết phần tử có thể kéo được khởi tạo?
Tôi đã thực hiện, nhưng không thể sắp xếp và có thể lựa chọn, do một số vấn đề bản quyền tôi không cung cấp mã u, nhưng tôi sẽ hướng dẫn bạn cách :) – Val