[JavaScript]Draggable Opcje

[vived7]

Mam pytanie jak zrobić w jquery i js draggable. niezależy mi na gotowych przykładach takich jak ui.Napisałem sobie taki skrypcik ale jest niedoskonały bo: 'mouseup' to nadal można poruszać divem. Prosze o jakąś podpowieź albo jakiś gotowy skrypt.

Kod

<script type='text/javascript'>

$(document).ready(function(){
$(".chwyc").mouseup(function(e){
var to = '#'+this.id;
$(to).parent('div').css('position', 'relative');
var skX = false;
var sky = false;
var to = false;
}).mousedown(function(e){
var to = '#'+this.id;
var p = $("#cale").position();
pageX = -p.left+e.pageX;
pageY = -p.top+e.pageY;
var offset = $(to).parent('div').offset();
var skx = pageX - offset.left;
var sky = pageY - offset.top;
var sky = sky + 5
$(to).mousemove(function(e){
pageX = -p.left+e.pageX;
pageY = -p.top+e.pageY;
var pageX = pageX - skx;
var pageY = pageY - sky;
$(to).parent('div').css('position', 'absolute');
$(to).parent('div').css('z-index', '99');
$(to).parent('div').css("top", pageY);
$(to).parent('div').css("left", pageX);
});
});
});

</script>
<table cellspacing='0' cellpadding='0' width='100%'> <tbody><tr><div style='padding: 0pt;'><td style="width: 33%; ">
<div style="width: 100%; display: block;border:1px solid black;min-height: 200px;" id='jeden'>

<div style="width: 200px; height: 200px;border: 2px solid black; margin: 7px;"  >
<div style="width: 192px; height: 30px;border-bottom: 2px dashed #DFE1E0; margin-top: 0px;margin-left: 0px;margin-right: 0px;" id='1' class='chwyc' >a</div>


treść</div>

</div></td><td style="width: 33%; ">
<div style="width: 100%; display: block;border:1px solid black;min-height: 200px;" id='dwa'>

<div style="width: 200px; height: 200px;border: 2px solid black;  margin: 7px;"  >
<div style="width: 192px; height: 30px;border-bottom: 2px dashed #DFE1E0; margin-top: 0px;margin-left: 0px;margin-right: 0px;"  id='2' class='chwyc' >b</div>


treść</div>

</div></td><td style="width: 33%;">
<div style="width: 100%; display: block;border:1px solid black;min-height: 200px;" id='trzy'>

<div style="width: 200px; height: 200px;border: 2px solid black;  margin: 7px;"  >
<div style="width: 192px; height: 30px;border-bottom: 2px dashed #DFE1E0; margin-top: 0px;margin-left: 0px;margin-right: 0px;" id='3' class='chwyc' >c</div>


treść</div>

</div></td></td>


</div></td></div></tr></tbody></table>