Các yếu tố bảng có thể kéo jQuery

Chức năng draggable của jQuery dường như không hoạt động trên các bảng (trong FF3 hoặc Safari). Thật khó để hình dung ra cách thức hoạt động của này sẽ làm việc, vì vậy nó không thực sự đáng ngạc nhiên khi nó không hoạt động.Các yếu tố bảng có thể kéo jQuery

<html> 
    <style type='text/css'> 
    div.table { display: table; } 
    div.row { display: table-row; } 
    div.cell { display: table-cell; } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script> 
    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script> 
    <script> 
    $(document).ready(function(){ 
    $(".row").draggable(); 
    }); 
    </script> 
    <body> 
    <div class='table'> 
     <div class='row'> 
     <div class='cell'>Foo</div> 
     <div class='cell'>Bar</div> 
     </div> 
     <div class='row'> 
     <div class='cell'>Spam</div> 
     <div class='cell'>Eggs</div> 
     </div> 
    </div> 
    <table> 
     <tr class'row'><td>Foo</td><td>Bar</td></tr> 
     <tr class='row'><td>Spam</td><td>Eggs</td></tr> 
    </table> 
    </body> 
</html>

Tôi đã tự hỏi a) nếu có bất kỳ lý do cụ thể tại sao điều này không làm việc (từ góc độ số w3c/HTML) và b) những gì đúng cách để đi về việc nhận hàng bảng có thể kéo được.

Tôi thích bảng thực vì thuật toán thu hẹp biên độ và chiều cao hàng - bất kỳ giải pháp thay thế nào có thể làm những việc đó sẽ hoạt động tốt.

Nguồn

2008-11-21 cdleary

Bạn có thêm không gian trong mỗi bộ chọn của mình không? Không nên có khoảng trống sau mỗi "div" và trước dấu chấm. Ví dụ: công cụ chọn đầu tiên của bạn khớp với các phần tử có class = "table" bên trong div ... – Prestaul

Cố định, cảm ơn, nhưng nó không tạo sự khác biệt. :( – cdleary

Nếu bạn có dữ liệu bảng thực sự, bạn nên gắn bó với bảng thực sự.

Và nếu bạn muốn kéo hàng trong một bảng, điều này JQuery + "draggable row table" library công trình hoàn hảo trong Firefox3

Nguồn

2008-11-21 05:08:32 VonC

Rất tiếc - đã sửa vị trí bảng. – cdleary

mẹo tuyệt vời! ..... – jlarson

không biết nếu cố ý nhưng câu trả lời của bạn hoàn toàn có vần điệu :) –

Có một cách để làm cho hàng bảng kéo với JQuery UI quá. Tất cả bạn cần làm là thiết lập các tùy chọn helper để một hàm trả về một div mới với một bảng bên trong đó sẽ tổ chức hàng bạn đang kéo như:

helper: function(event){ 
return $('<div class="drag-cart-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end(); 
},

Thx David Petersen for the tip: http://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/

Nguồn

2010-02-09 19:25:45

kỹ thuật tốt! khi sử dụng điều này, đừng quên rằng bất kỳ lệnh gọi 'drop' nào trên các phần tử' $ .droppable() 'của bạn vẫn có thể tham chiếu đến thuộc tính' ui.draggable' để nhắm mục tiêu phần tử hàng gốc. vì vậy bạn không cần phải hy sinh bất kỳ chức năng nào trong khi sử dụng một helper hơi sôi nổi (hy vọng có ý nghĩa) –

Có phương pháp tốt nào không sao chép phần tử tr? Bây giờ nó cho thấy cả hai hàng bảng gốc và nhân bản, là một chút bối rối cho người sử dụng – Andrei

Tôi không chắc chắn nếu đó là có thể, nhưng những gì về việc thêm một lớp css vào hàng nguồn và xám nó ra hoặc một cái gì đó trong khi bạn đang kéo? –

Một cũng có thể đặt css tr.ui-draggable-dragging {display: block} - theo cách này người ta có thể kéo các hàng, tuy nhiên, tọa độ của chúng được tính toán kém. Tôi chưa tìm được giải pháp tốt cho vấn đề này.

Nguồn

2012-01-20 12:57:47 Andrei

Chỉ trong trường hợp bất cứ ai làm cho cùng một sai lầm tôi đã làm:

Nếu bạn muốn để có thể sắp xếp lại TRS bên trong một bảng bằng cách kéo chúng xung quanh, .sortable là những gì bạn cần chứ không phải là .draggable

Chỉ mình tôi?

Nguồn

2012-04-18 13:07:06

Làm cho ngày của tôi. Ty. – OrangeTux

Không chỉ bạn :-) –

tôi đã thực hiện công việc này bằng cách sử dụng jQueryUI như sau:

$(function() { 
 
    $(".sortable").sortable({ 
 
    revert: true 
 
    }); 
 
});

table td { 
 
    border: solid 1px black; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<table> 
 
    <tbody class="sortable"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>One</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Two</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Three</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>Four</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
     <td>Five</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>6</td> 
 
     <td>Six</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Nguồn

2012-08-23 13:12:31 sevmusic

cảm ơn bạn thân !! –

Đây là khá muộn, nhưng hôm nay tôi tìm thấy html5 drag'n drop API hoạt động tốt với <tr> phần tử. Tất cả bạn cần làm là kích hoạt nó <tr draggable="true"> và đăng ký các sự kiện

dragstart 
drag 
dragenter 
dragleave 
dragover 
drop 
dragend

tôi tìm thấy bài viết này rất hữu ích http://www.html5rocks.com/en/tutorials/dnd/basics/

!! Hãy nhận biết rằng có một lỗ hổng trong API html5 này rằng sự kiện này sẽ bị sa thải khi bạn di chuột qua các phần tử con ngay cả khi bạn chỉ quan tâm đến phần tử cha. Hy vọng html5rocks mọi người sẽ sửa chữa nó sớm.

Nguồn

2013-05-06 00:32:53 Rn2dy

Các yếu tố bảng có thể kéo jQuery

Trả lời

Các vấn đề liên quan