Response title
This is preview!
cell content dropping to another cell
in Using jQuery UI
•
11 years ago
Dear All,
Just two days with jQuery and jQuery UI and I am already addicted ;)
Have a problem that I would like to solve, and (although I tried to read as much as I could), I am still unable to find an answer.
In a nutshell, I am going to strip the problem down to the most basic: it is about a 2x2 table, and I would like to take the content of the first cell (which is the text "cell 1") and move it to a second cell. The actual content of my table consists of some images, but for the moment text is just fine... I am interested to know how to move the content, using drag and drop.
The simple code would be:
<!DOCTYPE html PUBLIC ?-//W3C//DTD XHTML 1.0 Strict//EN”
?http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script>
$(document).ready( function(){
var dragOpts = {
revert: true,
revertDuration: 100,
containment: '#table_container'
};
$("#c1").draggable(dragOpts);
});
</script>
<body>
<table id="table_container" border="1">
<tr>
<td><p>cell 2</p></td>
<td><p>cell 3</p></td>
</tr>
<tr>
<td><p id="c1" class="ui-widget-content">cell 1</p></td>
<td><p>cell 4</p></td>
</tr>
</table>
</body>
</html>
What do I need to add to this code?
Thanks very much in advance,
Adrian
Just two days with jQuery and jQuery UI and I am already addicted ;)
Have a problem that I would like to solve, and (although I tried to read as much as I could), I am still unable to find an answer.
In a nutshell, I am going to strip the problem down to the most basic: it is about a 2x2 table, and I would like to take the content of the first cell (which is the text "cell 1") and move it to a second cell. The actual content of my table consists of some images, but for the moment text is just fine... I am interested to know how to move the content, using drag and drop.
The simple code would be:
<!DOCTYPE html PUBLIC ?-//W3C//DTD XHTML 1.0 Strict//EN”
?http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script>
$(document).ready( function(){
var dragOpts = {
revert: true,
revertDuration: 100,
containment: '#table_container'
};
$("#c1").draggable(dragOpts);
});
</script>
<body>
<table id="table_container" border="1">
<tr>
<td><p>cell 2</p></td>
<td><p>cell 3</p></td>
</tr>
<tr>
<td><p id="c1" class="ui-widget-content">cell 1</p></td>
<td><p>cell 4</p></td>
</tr>
</table>
</body>
</html>
What do I need to add to this code?
Thanks very much in advance,
Adrian
1