Simple Drag`n Drop example (part 2)

Posted by admin in JavaScript on 03 27th, 2008 | Comments

After publishing Simple JavaScript drag`n drop i have write new function dragObj(element, target). This object has two parameters.

1. element : The object on which the mouse events work.
2. target : The object which needs to Drag…

and its very simple to declare new draggable object…

new dragObj(draggableObject);
new dragObj(dragHandlerObject, draggableObject);

is it confusing?

Here at the first declaration i used only one parameter.. that means element and target are same object. if it needs to drag a object with a drag handler then its need to give two parameter. the drag handler as an element and the target object as target… The following example will clear all the confusion..:)

http://www.apueee.com/tma_examples/dragit2_tma.htm

Source Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Tarek Mahmud Apu : Sample Drag`n Drog Example</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

    .widget {

        height:200px;

        width:300px;

        position:absolute;

        border:1px outset #006666;

        border-right:1px inset #006666;

        border-bottom:1px inset #006666;

        background:#E0E0E0;

    #dragit {

        height:20px;

        position:relative;

        background: #006666;

        cursor:move;

    #box1 {

        height:200px;

        width:300px;

        position:absolute;

        border:1px solid red;

        background:#E0E0E0;

        cursor:move;

</style>

<script type="text/javascript">

    function dragObj(element, target)

        var objToDrag = (target) ? target : element;

        var dx, dy;

        // stop dragging and remove event

        function enddrag()

            document.onmouseup = null;

            document.onmousemove = null;

        //drag

        function drag(e)

            e = e || window.event;

            objToDrag.style.top = (e.clientY - dy) + 'px';

            objToDrag.style.left = (e.clientX - dx) + 'px';

        // initiate the drag

        function initDrag(e)

            e = e || window.event;

            dx = Math.abs(parseInt(objToDrag.style.left) - e.clientX);

            dy = Math.abs(parseInt(objToDrag.style.top) - e.clientY);

            document.onmouseup = enddrag;

            document.onmousemove = drag;

            return false;

          element.onmousedown = initDrag;

    window.onload = function()

      new dragObj(document.getElementById('box1'));

      new dragObj(document.getElementById('dragit'), document.getElementById('dragit').parentNode);

</script>

</head>

    <body>

        <h2 align="center" >Simple Drag and Drop Examples</h2>

        <h6 align="center"><a href="http://www.apueee.com">www.apueee.com</a></h6>

        <div id="box1" style="left:100px;top:100px;"> Drag Me </div>

        <div class="widget" style="left:200px;top:200px;">

            <div id="dragit"> Drag it </div>

            <div style=" text-align:center; padding-top:50px;position:relative;color:#000"> Lorem ipsam... ... </div>

        </div>

    </body>

</html>

So it’ll make easy to declare drag`n drop html element…

Simple JavaScript drag`n drop

Posted by admin in JavaScript on 03 22nd, 2008 | Comments

JavaScript drag`n drop is very simple thing. Last week some juniors ask me how they can drag a div element. Then I thought to write this simple post..

To Drag a div it needs 3 mouse events onmousedown, onmousemove and onmouseup. These three events can do all the job.

Live example here at

http://www.apueee.com/tma_examples/dragit_tma.htm

Javascript Code Here :

<script type="text/javascript">

    //initiate variables

    var element;

    var DragNow = false;

    var dx=0;

    var dy=0;

    function initDrag(e)

        e = (e)? e : event;

        DragNow = true;

        dx = Math.abs(parseInt(element.style.left) - e.clientX);

        dy = Math.abs(parseInt(element.style.top) - e.clientY);

        //declare mousemove and mouseup event

        document.onmousemove = startDrag;

        document.onmouseup = stopDrag;

    function stopDrag()

        DragNow = false;

    function startDrag(e)

        e = (e)? e : event;

        if(DragNow)

            element.style.top = (e.clientY - dy) + 'px';

            element.style.left = (e.clientX - dx) + 'px';

    window.onload = function()

      //set the draggable element

      element = document.getElementById(elementId);

      //initiate mousedown event

      element.onmousedown = initDrag;

</script>

Here the important thing is that the position of the element must

be 'absolute'.

That's all about the drag`n drop.

At last I have started my blog

Posted by admin in LifeStyle on 02 19th, 2008 | Comments

I have to write blog?? It’s impossible for a lazy person as like me. But thanks to emran bhai & hasin bhai for pushing me to write blog. Oh! great i have already wrote 4 line including this. Thanks to myself. May allah bless me to continue this blog…..

Page 3 of 3«1 23