JAKARTAPROJECT
JAKARTA TIPJSP TIPJSP Áú¹®&´äº¯DATABASE TIPJAVASCRIPT TIPWEBHACKING TIP±âŸ TIP
ÀÚ¹Ù½ºÅ©¸³Æ® ÆÁ
ÀÚ¹Ù½ºÅ©¸³Æ® ÆÁ
ÀÚ¹Ù½ºÅ©¸³Æ® ¹× CSS ÆÁ °Ô½ÃÆÇÀÔ´Ï´Ù
Javascript drag and drop
GoodBug http://www.jakartaproject.com
À̹ÌÁö ½½¶óÀÌ´õ º¸±â

Overview

Ever wanted to drag an element or image on your webpage? You can try using this very lightweight javascript drag handler. You can attach this drag handler to any relative or absolute positioned element.

First include the script at the top of your code (you can find the code in the source code section of this page). Do it in <head> tag. After loading the script you can write your code to attach drag handler.

You can attach this drag handler to any number of elements on page and you will be able to drag them all. The most importaint thing is that these elements must be posisioned relatively or absolutely.

 

Source code for webtoolkit.drag.js

 

/**
*
* Crossbrowser Drag Handler
* http://www.webtoolkit.info/
*
**/

var DragHandler = {


    // private property.
    _oElem : null,


    // public method. Attach drag handler to an element.
    attach : function(oElem) {
        oElem.onmousedown = DragHandler._dragBegin;

        // callbacks
        oElem.dragBegin = new Function();
        oElem.drag = new Function();
        oElem.dragEnd = new Function();

        return oElem;
    },


    // private method. Begin drag process.
    _dragBegin : function(e) {
        var oElem = DragHandler._oElem = this;

        if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
        if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;
        oElem.mouseX = e.clientX;
        oElem.mouseY = e.clientY;

        oElem.dragBegin(oElem, x, y);

        document.onmousemove = DragHandler._drag;
        document.onmouseup = DragHandler._dragEnd;
        return false;
    },


    // private method. Drag (move) element.
    _drag : function(e) {
        var oElem = DragHandler._oElem;

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;
        oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
        oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';

        oElem.mouseX = e.clientX;
        oElem.mouseY = e.clientY;

        oElem.drag(oElem, x, y);

        return false;
    },


    // private method. Stop drag process.
    _dragEnd : function() {
        var oElem = DragHandler._oElem;

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        oElem.dragEnd(oElem, x, y);

        document.onmousemove = null;
        document.onmouseup = null;
        DragHandler._oElem = null;
    }

}

 

 

2009-02-04 18:18:13
220.70.88.***

 

ÁÁÀº»ý°¢ ^^

÷ºÎÆÄÀÏ (ÃÑ 1°³)
  1. webtoolkit_drag.js 1.65 KB (186 ´Ù¿î·Îµå)
0Á¡ (0¸í)
µ¡±Û 1°³ | ÅÂ±× 1°³ | °ü·Ã±Ûº¸±â
ű×ÀÔ·Â
½±Ç¥(,)±¸ºÐÀ¸·Î Çѹø¿¡ ¿©·¯ ű׸¦ ÀÔ·ÂÇÒ¼ö ÀÖ½À´Ï´Ù
drag (1)
ÇູÇѱ¤´ë
(0) (0)
°¨»çÇÕ´Ï´Ù. ^^
118.218.148.*** 2009-02-04 18:18:13
À̸§ ºñ¹Ð¹øÈ£
ÀÚ¹Ù½ºÅ©¸³Æ® ÆÁ
ÀÚ¹Ù½ºÅ©¸³Æ® ¹× CSS ÆÁ °Ô½ÃÆÇÀÔ´Ï´Ù
! ¹øÈ£ Á¦¸ñ ±Û¾´ÀÌ ÀÏÀÚ Á¶È¸
220 img À̹ÌÁö ºÎµå·´°Ô ÁÙÀ̱â 1 GoodBug 2009-12-18 8,193
219 rss xml ÆĽÌÇÏ´Â ¸ðµâ ÀÔ´Ï´Ù. 1 °í°í½Ì 2009-11-27 7,641
218 Æ®¸® ÀÔ´Ï´Ù . 1 °í°í½Ì 2009-11-27 5,873
217 ¿¡·¯Ã³¸® 1 kaiser 2009-05-11 6,088
216 À¥ÆäÀÌÁö º¹»ç ¹æÁö ÇØÁö ÇÏ´Â ¹ý kaiser 2009-05-03 11,673
215 javascript ÇÑ±Û Â¥¸£±â 1 1 kaiser 2008-08-14 7,985
214 rolling ·Ñ¸µ ½ºÅ©¸³Æ® 1 2 GoodBug 2008-07-11 10,128
213 alert ¸Þ½ÃÁö¸¦ print ó·³ »ç¿ëÇϱâ 2 °í°í½Ì 2008-06-10 8,675
212 onload onload Æã¼ÇÀÌ Á¤ÀǵǾî ÀÖ´Â »óȲ¿¡¼­ onload¿¡ Ãß°¡Çϱâ 1 GoodBug 2008-04-11 8,440
211 javascript ÀÚ¹Ù½ºÅ©¸³Æ® °³¹ß°¡À̵å 4 1 kaiser 2008-04-09 8,898
210 escape HTML escpae code 1 GoodBug 2008-04-02 6,499
209 optgroup SELECT ¸ñ·Ï ±×·ìº°·Î ¹­±â 1 1 GoodBug 2008-03-06 8,215
208 µ¿Àû Å×À̺í Å×ÀÌºí¿¡ µ¿Àû TR »ðÀÔ ¹× »èÁ¦ IE, FF °ø¿ë 1 GoodBug 2008-01-18 11,745
drag Javascript drag and drop 1 1 GoodBug 2008-01-16 8,171
206 sort Sortable HTML table 2 GoodBug 2008-01-16 7,402
205 scrollable table Scrollable HTML table 1 GoodBug 2008-01-16 7,087
204 CSS CSS centered layout 1 1 GoodBug 2008-01-16 6,685
203 utf8 Javascript UTF-8 1 GoodBug 2008-01-16 7,914
202 encode Javascript url decode, encode 2 GoodBug 2008-01-16 8,159
201 ¾Ïȣȭ Javascript MD5 2 GoodBug 2008-01-15 7,364
copyright 2005-2024 by Unicorn