 |
| |
ถ้าต้องการให้ลาก button ใน gridview แล้วให้ drag & drop โดยใช้ JQuery |
| |
 |
|
|
 |
 |
|
*** ถ้าต้องการให้ลาก button ใน gridview แล้วให้ drag & drop ต้องใส่อะไรเพิ่มครับ ***
ในตัวอย่าง drag & drop ได้ทุก column อยาก fix ให้ใช้คำสั่งได้เฉพาะ column เดียว
ลองใส่ $("[id*='ugv']").sort('column_name').sortable แล้วไม่ได้ครับ
--------------------------------------------------------------------------------------
function griddragdrop() {
/*Drag & Drop*/
$(function () {
$("[id*='ugv']").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
},
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
});
}
------------------------------------------------------------------------------------------
Tag : .NET, jQuery, Web (ASP.NET), VB.NET, Windows
|
ประวัติการแก้ไข
2023-04-07 09:49:12
|
 |
 |
 |
 |
| Date :
2023-04-07 09:47:34 |
By :
chaiya_mu |
View :
1548 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
กำหนด selector ใน items option
Code (JavaScript)
function griddragdrop() {
/*Drag & Drop*/
$(function () {
$("[id*='ugv'] tbody").sortable({
items: 'td', // Only allow dragging and dropping within td elements
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
},
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
});
}
|
| |
|
|
| |
| Date :
2023-04-07 11:05:14 |
By :
009 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 3 เขียนโดย : chaiya_mu เมื่อวันที่ 2023-04-10 09:55:55
รายละเอียดของการตอบ ::
ถ้าต้องการแค่เรียงใหม่ ไม่ใช่เพิ่มคอลัมน์ในแถว
ลองแก้ receive callback function เช่น
Code (JavaScript)
function griddragdrop() {
/*Drag & Drop*/
$(function () {
$("[id*='ugv'] tbody").sortable({
items: 'td.class-name', // Only allow dragging and dropping within td elements
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
},
receive: function (e, ui) {
// Get the target and source rows
var targetRow = $(this).closest('tr');
var sourceRow = ui.sender.closest('tr');
// Move the source row before or after the target row, depending on the drop position
if (ui.position.top > ui.originalPosition.top) {
// Drop position is below the source row, so insert after the target row
targetRow.after(sourceRow);
} else {
// Drop position is above the source row, so insert before the target row
targetRow.before(sourceRow);
}
// Reset the table sorting
$(this).sortable("refresh");
}
});
});
}
ถ้ายังไม่ได้ ต้องดูรายละเอียดวิธีใข้ของ jQuery UI
ว่าแต่ละ option สามารถกำหนดอะไรได้บ้าง
|
| |
|
|
| |
| Date :
2023-04-10 12:09:49 |
By :
009 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
