[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>

[erix]

Weź jakoś ten kod upakuj lepiej, brak wcięć naprawdę utrudnia analizę...

Daj ten przykład na żywo, bo z up teoretycznie powinno działać.

edit: DZIAŁAJĄCY w przeglądarce, a nie listing.

[vived7]

może to ułatwi

tu jest skrypt

Kod

$(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);
             });
     });
});

i html

Kod

<table>
<tbody>
<tr>
<div >
<td >
<div id='jeden'>

<div   >
<div id='1' class='chwyc' >a</div>
treść
</div>

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

Ten post edytował vived7 7.08.2009, 11:49:42