Hi all, the problem i have is that whenever i try to drag and drop with a handle, in the process of drag and drop, the body text will not stay aligned with the text, which is illustrated in the code attached at the end.
The reason why I prefer not to put the handle in the <p> tags, as some of the examples on the web shows, is that i would like to allow user to in place edit the stuff between the p tags, therefore i don't want to go and do a lot of preprocessing (i may add more stuff around the p tags) before displaying the form.
If anyone can shed some light on this matter, it would be greatly appreciated!
Code, using google CDN, so it should just work:
<head>
<style type="text/css">
#container{
width:500;
}
.handle{
float:left;
}
.
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#container').sortable({
revert:true,
handle:'.handle',
});
});
</script>
</head>
<div id="container">
<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>