Форум PHP программистов > Перетаскивание ячейки таблицы (td)

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Перетаскивание ячейки таблицы (td)

asdf27

6.07.2012 - 02:24

Есть таблица, скажем 3х3. Вопрос в том, чтобы можно было таскать ячейки (не строки и не столбцы). Стоит ли искать? Или делать div'ами? Таблица генерируется php и не всегда одного размера.

Сейчас php изучаю, java следом, потому нет времени изучать с нуля, а участок кода требует этого внедрения.

На решение не рассчитываю, если можно, совет.

Спустя 44 минуты, 5 секунд (6.07.2012 - 02:08) asdf27 написал(а):

Отчасти получилось, но ячейки перемещаются в пределах строки, а между строками нет.


<html>
    <head>
<script src="./jQuery UI Sortable - Display as grid_files/jquery-1.7.2.js"></script>
	<script src="./jQuery UI Sortable - Display as grid_files/jquery.ui.core.js"></script>
	<script src="./jQuery UI Sortable - Display as grid_files/jquery.ui.widget.js"></script>
	<script src="./jQuery UI Sortable - Display as grid_files/jquery.ui.mouse.js"></script>
	<script src="./jQuery UI Sortable - Display as grid_files/jquery.ui.sortable.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
	<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; }
	#sortable { margin: 3px 3px 3px 0; padding: 1px; float: left; text-align: center; }
	</style>
	<script>
	$(function() {
		$( "#sortable tr" ).sortable();
		$( "#sortable tr" ).disableSelection();
	});
	</script>
</head>

Вот часть генерации таблицы, id прописан в <table>


echo '<table id="sortable" border=1 >';
for ($k = 1; $k <= $tr; $k++) {

    echo '<tr>';

    for ($i = 1; $i <= $n; $i++) {
        $result1 = mysql_query("SELECT * FROM map WHERE tid=$t");
        $myrow1 = mysql_fetch_array($result1);

        echo '<td width=100 height=50 id=' . $t . '>';
        if ($myrow1[tid] != $t) {
            echo '<a href="add.php?tid=' . $t . '"><img src="../design/img/add.png"></a></td>';
        } else {
            echo 'Стол №' . $myrow1[number] . '<br>Персон: ' . $myrow1[text] . '<br><a href="edit.php?tid=' . $t . '"><img src="../design/img/edit.png"></a> <a href="del.php?tid=' . $t . '"><img src="../design/img/del.png"></a></td>';
        }
        $t++;
    }
    echo '</tr>';
}
echo '</table>

Спустя 35 минут, 42 секунды (6.07.2012 - 02:43) asdf27 написал(а):

Своими силами получилось, но остался еще момент: как сделать "перескок" при наложении, т.е. замененная ячейка девалась бы на место перетаскиваемой или соседней?




<!doctype html>
<html lang="ru">
<head>
 
<style>
#makeMeDraggable { width: 100px; height: 50px; }
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
 
<script type="text/javascript">
 
$( init );
 
function init() {
  $('#makeMeDraggable').draggable( {
    containment: 'parent',
    snap: true
  } );
  $('#makeMeDraggable2').draggable( {
    containment: 'parent',
    snap: true
  } );
  
  $('#makeMeDraggable3').draggable( {
    containment: 'parent',
    snap: true
  } );
  
  $('#makeMeDraggable4').draggable( {
    containment: 'parent',
    snap: true
  } );
  
  $('#makeMeDraggable5').draggable( {
    containment: 'parent',
    snap: true
  } );
  
  $('#makeMeDraggable6').draggable( {
    containment: 'parent',
    snap: true
  } );
}
 
</script>
 
</head>
<body>
    
<div  id="content">
    <table border="1">
        <tr ><td id="makeMeDraggable">124441</td><td  id="makeMeDraggable2">12321</td></tr>
            <tr><td id="makeMeDraggable3">12321</td><td id="makeMeDraggable4">12321</td></tr>
                <tr><td id="makeMeDraggable5">55521</td><td id="makeMeDraggable6" >12321</td></tr>
    </table>
</div>

Быстрый ответ:

Здесь расположена полная версия этой страницы.