جابجایی tr [بایگانی] - برنامه نویس

olampiad

چهارشنبه 21 مرداد 1394, 09:25 صبح

سلام و خسته نباشید
به این صفحه ی سری بزنید.
https://jqueryui.com/draggable/#sortable
تو اینجا میبینید که li ها در داخل ul به راحتی قابل جابجایی میباشد.
حالا من میخوام کاری کنم که در داخل جدول tr ها جابجا بشن.
ی کدی واسش نوشتم ولی هر کاری میکنم کاربرد بالا رو نداره.
میشه ی کوچولو بررسی کنید.
خیلی ممنون

$(document).ready(function(e) {

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

});

<!doctype html><html><head><meta charset="utf-8"><title> css </title><style type="text/css">#tab{ background:#F90; width:300px; text-align:center; margin:auto;}
#tab tr{ background:#FC9;}

</style><script type="text/javascript" src="jquery-2.0.1.js"></script><script type="text/javascript" src="jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">$(document).ready(function(e) { $(function() {$( "#tab tr" ).sortable({ revert: true});}); });</script></head><body>

<table id="tab"><tr><td>one</td></tr><tr><td>two</td></tr><tr><td>three</td></tr><tr><td>fore</td></tr><tr><td>five</td></tr></table>
</body></html>

mehrvarzan

چهارشنبه 21 مرداد 1394, 10:11 صبح

از همون پلاگین استفاده کنی و به جای li میتونی tr قرار بدی

$(function() {

$( "#sortable" ).sortable({

revert: true

});

$( "#draggable" ).draggable({

connectToSortable: "#sortable",

helper: "clone",

revert: "invalid"

});

$( "ul, li" ).disableSelection();

});

در بالا draggable آی دی li هست که میتونی منتقلش کنی به tr

olampiad

چهارشنبه 21 مرداد 1394, 19:39 عصر

سلام
من کد رو به این صورت تغییر دادم ولی جواب نداد.

<!doctype html><html><head><meta charset="utf-8"><title> css </title><style type="text/css">#tab{ background:#F90; width:300px; text-align:center; margin:auto;}
#tab tr{ background:#FC9;}

</style><script type="text/javascript" src="jquery-2.0.1.js"></script><script type="text/javascript" src="jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
$(function() { $( "#tab" ).sortable({ revert: true }); $( ".drag" ).draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); $( "tr" ).disableSelection();});
</script></head><body>

<table id="tab"><tr class="drag"><td>one</td></tr><tr class="drag"><td>two</td></tr><tr class="drag"><td>three</td></tr><tr class="drag"><td>fore</td></tr><tr class="drag"><td>five</td></tr></table>
</body></html>

ب نظرتون مشکل از کجاست؟
مرسی

sinoser

چهارشنبه 21 مرداد 1394, 20:37 عصر

مشکل از تگ table هست , بیخیال چراش اینو بزن.

<table>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tbody>
</table>

$('tbody').sortable();

table{background:red;width:300px;text-align:center;margin:auto;padding:5px;}
table tr{ background:blue;}