mandarīnpīle Posted June 11, 2013 Report Share Posted June 11, 2013 Ir html fails ar css un javascript, kuram vajadzētu darboties sekojoši: 1.) Ir liels pelēks kvadrāts, DIV elements, kurā, ieklišķinot ar peli un neatlaižot velkot, nemitīgi tiek izdarīts ieraksts par to, ka notiek vilkšana. 2.) Tad, kad pele tiek atlaista, tiek unbindots mousemove events un DIVā tiek ierakstīts, ka vilkšana pārtraukta. Problēma - ierakstam, ka vilkšana pārtraukta, loģiski būtu jāparādās tikai vienu reizi, bet tā nenotiek. Jo vairāk reižu tiek izdarīta tā draggošana un peles atlaišana, jo ar katru reizi tiek izdarīts par vienu ierakstu vairāk. Zemāk ir viss kods vienā failā un arī pievienots kā pielikums. Kur ir problēma, kāpēc tas ieraksts neparādās tikai vienu reizi? <!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #feedback{ background-color: #3D3F36; color:white; padding-left: 10px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: scroll; width: 500px; height: 300px; } </style> </head> <body> <div id="feedback">Ieklikšķini šeit ar peli un velc. Pēc mirkļa atlaid.<br/></div> </body> </html> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript"> time = new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds(); //Izpildīt kodu pēc mouse down eventa $('#feedback').mousedown(function(){ //Kad pele ir nospiesta un to kustina, #feedback div'ā ierakstīt, ka notiek vilkšana $(document).mousemove(function(){ //Ieraksts $('#feedback').append(time+' you are dragging<br/>'); //Div'a automātiska aiztīšana uz leju līdz jaunākajam ierakstam document.getElementById("feedback").scrollTop = document.getElementById("feedback").scrollHeight; }); //Kad atlaiž peli, pārtrauc tās izsekošanu $(document).mouseup(function(){ //Peles kustības izsekošanas pārtraukšana $(document).unbind('mousemove'); //Ieraksts, kas kaut kāda iemesla pēc tiek izdarīts vaiŗāk nekā vienu reizi. Kāpēc? $('#feedback').append(time+' you just stopped dragging<br/>'); //Div'a automātiska aiztīšana uz leju līdz jaunākajam ierakstam document.getElementById("feedback").scrollTop = document.getElementById("feedback").scrollHeight; }); }); </script> index_test.html Quote Link to comment Share on other sites More sharing options...
xPtv45z Posted June 11, 2013 Report Share Posted June 11, 2013 Tāpēc, ka ar mousedown eventu tu mousemove eventu uzbindo atkal atpakaļ. Es eventus liktu ar šo - http://api.jquery.com/one/ Quote Link to comment Share on other sites More sharing options...
indoom Posted June 11, 2013 Report Share Posted June 11, 2013 (edited) $(document).mouseup iznes ārpus $('#feedback').mousedown funkcijas jo mousemove ta tiek unbindots, bet ne mouseup, un tas ar katru mousedown tiek piebindots klāt un izmanto labāk jsfiddle, lai parādītu piemēru Edited June 11, 2013 by indoom Quote Link to comment Share on other sites More sharing options...
mandarīnpīle Posted June 11, 2013 Author Report Share Posted June 11, 2013 $(document).mouseup iznes ārpus $('#feedback').mousedown funkcijas jo mousemove ta tiek unbindots, bet ne mouseup, un tas ar katru mousedown tiek piebindots klāt un izmanto labāk jsfiddle, lai parādītu piemēru Ou, ok, sapratu. Nezināju, ka jQuery tā darbojas. Manuprāt, pareizāk gan būtu nevis iznest $(document).mouseup ārpus $('#feedback').mousedown, bet gan tūlīt tur pat aiz mousemove unbindot arī mouseup, lūk, šādi: $(document).unbind('mousemove mouseup'); Tevis ieteiktajā gadījumā uz katru mouseup JEBKUR DOKUMETNĀ visu laiku tiktu nevajadzīgi veikta unbind darbība, bet šādi to veic tikai pēc tam, kad tā izdarīta iekš #feedback DIV'a un sākusies vilkšana. Quote Link to comment Share on other sites More sharing options...
codez Posted June 11, 2013 Report Share Posted June 11, 2013 Vari izpētit kā to dara jquery ui draggable plugins: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.draggable.js pati sāls gan widgetā: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.mouse.js Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.