Mar

Simple Drag`n Drop example (part 2)

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…

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.

This entry was written by admin and posted on March 27, 2008 at 4:42 am and filed under JavaScript. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.