JavaScript Google IG Drag Demo
Ч¹ûÑÝʾµØÖ·£ºhttp://www.phzzy.org/code/drag/google_drag.html
ÍÏקÔÀí£º
¹ØÓÚÍÏקµÄ»ù´¡£¬¿ÉÒԲο¼ÕâƪÎÄÕ£¬½²µÃ·Ç³£²»´í¡£
http://www.sohotx.com/mzk/index.php/1007/ArticleContent/298.html
ÆäʵÔÀíºÜ¼òµ¥£¬¾ÍÊÇ°Ñ°ó¶¨Èý¸öʼþ£ºonmousedown , onmousemove , onmouseup¡£
ÔÚÊó±êµãÏÂʱ(onmousedown)°ÑÔªËصÄ×ø±êÉèÖÃΪÊó±êµÄ×ø±ê£¬²¢°Ñ position ÉèÖÃΪ¾ø¶Ô×ø±ê¡£
ÔÚÊó±êÒƶ¯Ê±(onmousemove)¸Ä±äÔªËØ×ø±ê¡£
ÔÚÊó±êµ¯Æðʱ(onmouseup)È¡Ïû°ó¶¨µÄʼþ£¬²¢×öºóÐø²Ù×÷¡£
ÏÂÃæÊǹØÓÚ·Â google ¸öÐÔ»¯Ö÷Ò³ÍÏקЧ¹ûµÄÒ»¸ö Demo (Ðè°üº¬ prototype)¡£
×ܹ²ÓÐËĸöÎļþ£º
1. google_drag.html
2. prototype.js
3. ͨÓÃÍÏקº¯Êý drag.js
4. ·Â google ¸öÐÔ»¯Ö÷Ò³µÄÍÏק google_drag.js
google_drag.html ÖÐ×îºó¼¸ÐÐÖÐÓиö³õʼ»¯ÍÏקº¯Êý
window.onload = function(){initDrag();}
±ØÐëд³ÉÕâÑù£¬Èç¹ûÖ±½Óд³É
window.onload = initDrag();
ÕâÑù»áÔÚ IE ϱ¨¸ö´íÎó£ºÉÐδʵÏÖ
ÆäËû´úÂë¿ÉÒÔÖ±½Ó²é¿´Ô´Â룬¾Í¼¸ÐÐ×¢ÊÍ¡£Æäʵ¾ÍÊÇÓà JavaScript »æÖÆÁË 15 ¸ö div£¬È»ºóÉèÖÃËüÃÇ class ¶¼Îª
drag_div (ºóÃæÊÇͨ¹ý className À´ÅжÏÔªËØÊÇ·ñ¿ÉÍÏק)£¬È»ºó°Ñ¿ÉÍÏקµÄ²¿·ÖµÄ ID ÉèÖÃÔªËØµÄ ID ºó¼Ó¸ö _h
(Ò²¿ÉÉèÖÃ×Ô¼ºÎªÍÏק²¿·Ö)
drag.js ÊÇÒ»¸ö±È½ÏͨÓõÄÍÏקº¯Êý¡£ÀïÃæ°üº¬Ëĸö×î¼òµ¥µÄº¯Êý£ºstart_Drag, when_Drag, end_Drag, after_Drag¡£ÕâËĸöº¯ÊýÖ»ÊÇʵÏÖ×î»ù±¾µÄÍÏק¹¦ÄÜ£¬ÒªÊµÏÖÆäËû¹¦ÄÜ¿ÉÐ޸ĻòÔÚºóÃ渲¸ÇµôÕâЩº¯Êý¡£
google_drag.js ÊÇ·Â google ¸öÐÔ»¯Ö÷Ò³ÍÏקЧ¹ûµÄº¯Êý¡£Ëü¸²¸ÇÁËÉÏÃæ˵µÄÄǸöËĸöº¯Êý£¬ÊµÏֱȽϸ߼¶µÄЧ¹û¡£
ÍÏקÆäʵӦ¸Ã»¹ÊDZȽϼòµ¥µÄ£¬ÊµÏÖÍêÍÏקºó¾ÍÊÇÒªÓà Ajax À´´«µÝÍÏקºóµÄλÖ㬸ıä·þÎñÆ÷¶ËµÄÖµ£¬ÕâÑùÏ´ÎÓû§·ÃÎÊʱԪËزŻáλÖò»±ä¡£Ð§¹ûµÄʵÏÖÊǷdz£¼òµ¥µÄ£¬Ö÷ÒªÊÇÔõôÈںϵ½ÒÑÓеÄÏîÄ¿ÖУ¬´Ó¶øÌá¸ßÓû§ÌåÑé¡£
Õâ¸ö Demo ÓÐÒ»²¿·Ö²Î¿¼µÄÍøÉϵĴúÂë¡£
ÔÚÍøÉÏ»¹ÓкܶàÕâÖÖÀý×Ó£¬²»¹ý¸Ð¾õЧÂʶ¼Ã»Õâ¸ö¸ß¡£ÓÐһЩÀý×ÓÊÇ°ÑËùÓÐÔªËصÄλÖö¼ÉèÖÃΪ absolute£¬È»ºóÖ±½ÓÐ޸ĸ÷¸öÔªËØµÄ top ºÍ
leftÀ´ÏÔʾЧ¹û£¬¸Ð¾õÄǸö²»ÊǺÜͨÓã¬ÄÇÑùµÄ»°±ÈÈçÎÒÒª°ÑÕâ¸öЧ¹ûÐÞ¸ÄΪһ¸öÊýµÄÍÏק£¬²¢ÇҼǼ¸÷¸öÔªËØÖ®¼äµÄλÖ㬱ȽÏÂé·³¡£Õâ¸öÀý×ÓÖÐÒª¼Ç¼ԪËØ
µÄλÖã¬Ö»ÐèÔÚÍÏקÍê³Éºó¼Ç¼±»ÍÏקԪËØµÄ id ÒÔ¼°ÍÏקµ½ÁËÄĸöÔªËصÄÇ°ÃæÈ»ºó´«¸ø·
Ïà¹ØÎĵµ£º
Ò»¸ö¿ÉÍϷŵģʣÓЧ¹û;
var isIE = (document.all) ? true : false;
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}
var Extend = function( ......
javascriptµÃµ½ÆÁÄ»·Ö±æÂʺÍÍøÒ³¿É¼ûÇøÓòµÈ·½·¨
<body><SCRIPT LANGUAGE="JavaScript">...
var s = "";
s&n ......
¿Í»§¶Ëä¯ÀÀÆ÷²»Ö§³Öµ±Ç°JavaScript½Å±¾´æÔÚÈçÏÂÈýÖÖ¿ÉÄÜ£º
¿Í»§¶Ëä¯ÀÀÆ÷²»Ö§³ÖÈκÎJavaScript½Å±¾£»
¿Í»§¶Ëä¯ÀÀÆ÷Ö§³ÖµÄJavaScript½Å±¾°æ±¾Óë¸Ã½Å±¾´úÂëʹÓõİ汾ËùÖ§³ÖµÄ¶ÔÏó¡¢ÊôÐÔ»ò·½·¨²»Í¬£»
¿Í»§¶ËΪÁË°²È«Æð¼û£¬ÒѾ½«ä¯ÀÀÆ÷¶ÔJavaScript½Å±¾µÄÖ§³ÖÉèÖÃΪ½ûÖ¹¡£
ÒÔÉÏÈýÖÖÇé¿ö×ܽáÆðÀ´£¬¾ÍÊÇä¯ÀÀÆ÷¶ ......
ŬÁ¦ÁËÒ»ÌìÔÙ¼ÓÒ»Ì죬¾Íд¸ö½Å±¾»¹ÊDz»ÐС£Ôõô°ì¡£
ÏÂÃæµÄ´úÂëÓдíµÄ£¬Ö´Ðв»ÁË¡£ÔÝʱ»¹Ã»Óз¢ÏÖMyEclipseÀïÃæÈçºÎÀ´µ¥²½µ÷ÊÔ£¬¾ÍÏñÔÚvs2005ÀïÃæ¿ÉÒÔ°´×¡F10À´µ÷ÊÔ£¬¿´³ö×Ô¼ºµÄÄǸöÓï¾äд´íÁË£¬¶øÔÚÀïÖ»Äܹ»×Ô¼º¼ì²é£¬²éÁ˶àÉÙ±éÁËÒ²»¹ÊÇûÓÐÄܹ»·¢ÏÖÓÐʲô´íµÄ¡£´úÂëժ¼ÈçÏ£º
<script language="javaScript ......
¶ÔÓÚ³õѧÕߣ¬Ò²Ðдó¼Ò»áÈÏΪJava°üº¬JavaScript£¬È»¶øÕâÖÖ´Ó×ÖÃæÒâ˼µÄÀí½âÊÇ´íÎóµÄ£¬ÏÂÃæС±àdz̸һÏÂJavaScriptÓëjavaµÄÇø±ð¡£
1. »ùÓÚ¶ÔÏóºÍÃæÏò¶ÔÏó
JavaÊÇÒ»ÖÖÕæÕýµÄÃæÏò¶ÔÏóµÄÓïÑÔ£¬¼´Ê¹ÊÇ¿ª·¢¼òµ¥µÄ³ÌÐò£¬±ØÐëÉè¼Æ¶ÔÏó¡£
JavaScriptÊÇÖֽű¾ÓïÑÔ£¬Ëü¿ÉÒÔÓÃÀ´ÖÆ×÷ÓëÍøÂçÎ޹صģ¬ÓëÓû§½»»¥×÷Óõĸ´ÔÓÈí¼þ¡£ ......