Results 1 to 4 of 4

Thread: Drag n Drop javascript with Advanced Features

  1. #1
    Registered
    Join Date
    May 2012
    Location
    Earth
    Posts
    3
    Rep Power
    0

    Lightbulb Drag n Drop javascript with Advanced Features

    Anyone know how to create a Drag n Drop javascript that works within tables and can change the value of an image that has been Drag n Dropped onto?

    I have my javascript and some example html pages but its not fully functioning.
    I can drag n drop but the images are not really in thumbnails within a table.
    The images are floating over the tables giving you the illusion theyre nested in thumbnail tables.

    What I could do is email my samples to anyone interested or capable of writing up a javascript that can work in multiple tables. I will have to email because I dont believe you can attach files to a forum thread?

    Here is a sample code of my tables:

    <center>
    <table bgcolor="#000000" border="0" cellspacing="0" cellpadding="2">
    <tr>
    <td><img src="i/y.png" width="63" height="87"></td>
    <td><img src="i/o.png" width="63" height="87"></td>
    <td><img src="i/pi.png" width="63" height="87"></td>
    <td><img src="i/r.png" width="63" height="87"></td>
    <td><img src="i/be.png" width="63" height="87"></td>
    <td><img src="i/gn.png" width="63" height="87"></td>
    <td><img src="i/p.png" width="63" height="87"></td>
    <td><img src="i/s.png" width="63" height="87"></td>
    <td><img src="i/gy.png" width="63" height="87"></td>
    <td><img src="i/x.png" width="63" height="87"></td>
    </tr>
    </table>
    </center>

    <p><br><p><br><p><br>

    <center>
    <table bgcolor="#000000" border="0" cellspacing="0" cellpadding="2">
    <tr>
    <td><img src="i/p.png" width="63" height="87"></td>
    <td><img src="i/pi.png" width="63" height="87"></td>
    <td><img src="i/x.png" width="63" height="87"></td>
    <td><img src="i/gy.png" width="63" height="87"></td>
    <td><img src="i/s.png" width="63" height="87"></td>
    <td><img src="i/gn.png" width="63" height="87"></td>
    <td><img src="i/y.png" width="63" height="87"></td>
    <td><img src="i/be.png" width="63" height="87"></td>
    <td><img src="i/o.png" width="63" height="87"></td>
    <td><img src="i/r.png" width="63" height="87"></td>
    </tr>
    </table>
    </center>

    <p><br>

    Is it possible to create a Drag n Drop javascript that can work with any of the thumbnail images in the 2 tables above?
    Maybe someone can create 1 large table out of the 2 tables above, making it appear visually on screen the same way like the 2 tables.
    That way if a Drag n Drop javascipt was created that it would work within that 1 large table.
    I want to be able to drag/move any image from the 2 tables onto any other image.
    When drop image the value of the image it has been dropped onto to change to new value ie. new image.
    Every possible image move equation will be pre-determined with a result waiting.
    For example if move first image in bottom table row to the last image on top table row, a new image will replace the last image on top table row.
    Images can be moved in any direction.
    There must be a setting in script that allows some pre-determined images to not be moveable (cannot drag n drop at all).

    Below is the very limited javascript I am working with currently which is not designed for the functions I am looking for.
    Its likely pointless me listing it, but here it is.
    It works but does not work within tables.
    Need a modified or new javascript for that.

    var Drag = {

    obj : null,

    init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    {
    o.onmousedown = Drag.start;

    o.hmode = bSwapHorzRef ? false : true ;
    o.vmode = bSwapVertRef ? false : true ;

    o.root = oRoot && oRoot != null ? oRoot : o ;

    if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
    if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
    if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
    if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

    o.minX = typeof minX != 'undefined' ? minX : null;
    o.minY = typeof minY != 'undefined' ? minY : null;
    o.maxX = typeof maxX != 'undefined' ? maxX : null;
    o.maxY = typeof maxY != 'undefined' ? maxY : null;

    o.xMapper = fXMapper ? fXMapper : null;
    o.yMapper = fYMapper ? fYMapper : null;

    o.root.onDragStart = new Function();
    o.root.onDragEnd = new Function();
    o.root.onDrag = new Function();
    },

    start : function(e)
    {
    var o = Drag.obj = this;
    e = Drag.fixE(e);
    var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
    var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
    o.root.onDragStart(x, y);

    o.lastMouseX = e.clientX;
    o.lastMouseY = e.clientY;

    if (o.hmode) {
    if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
    if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
    } else {
    if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
    if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
    }

    if (o.vmode) {
    if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
    if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
    } else {
    if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
    if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
    }

    document.onmousemove = Drag.drag;
    document.onmouseup = Drag.end;

    return false;
    },

    drag : function(e)
    {
    e = Drag.fixE(e);
    var o = Drag.obj;

    var ey = e.clientY;
    var ex = e.clientX;
    var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
    var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
    var nx, ny;

    if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
    if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
    if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
    if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

    nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
    ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

    if (o.xMapper) nx = o.xMapper(y)
    else if (o.yMapper) ny = o.yMapper(x)

    Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
    Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
    Drag.obj.lastMouseX = ex;
    Drag.obj.lastMouseY = ey;

    Drag.obj.root.onDrag(nx, ny);
    return false;
    },

    end : function()
    {
    document.onmousemove = null;
    document.onmouseup = null;
    Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
    parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
    Drag.obj = null;
    },

    fixE : function(e)
    {
    if (typeof e == 'undefined') e = window.event;
    if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
    if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
    return e;
    }
    };

  2. #2
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    20
    Sounds suspiciously homeworkish to me. Be that as it may, here's a tutorial on drag and drop:
    http://w3schools.com/html5/html5_draganddrop.asp

    Being that drag and drop is an HTML5 standard, you should know that the <center> tag has been deprecated (a 4 syllable word for "don't use it") since at least HTML 4.01 (1999??). Use CSS to center your tables. <div style="text-align:center;"> should work.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  3. #3
    Registered
    Join Date
    May 2012
    Location
    Earth
    Posts
    3
    Rep Power
    0

    Thumbs up 1000 apologies

    Quote Originally Posted by Builder View Post
    Sounds suspiciously homeworkish to me.
    Thanks for your information. I will look into it after this reply.
    However to quote you above, please note my "suspicious" pleading words I posted dont come with audible sounds. But I believe you could do that with HTML5.
    Kapow!

    Quote Originally Posted by Builder View Post
    Being that drag and drop is an HTML5 standard, you should know that the <center> tag has been deprecated (a 4 syllable word for "don't use it") since at least HTML 4.01 (1999??). Use CSS to center your tables. <div style="text-align:center;"> should work.
    Thanks for the CSS info. You may now resume being a benevolent mentor and I will resume being an grateful enthusiastic newbie.

    Actually Builder I couldn't hold back and quickly had a sneak peek at the link you provided.
    I hereby throw myself to your feet with 1000 apologies for any doubt I reserved in the link provided and worship you for the quality information.
    I bow down and/or cower down to your awesomeness with full respect.

    Thank you. I will reply to this thread in the future with a verdict on what I came up with regarding the information used from the link.

    Javascript work here I come.

  4. #4
    Registered
    Join Date
    May 2012
    Location
    Earth
    Posts
    3
    Rep Power
    0

    Thumbs up Heres what I designed, you will need to provide your own images

    Quote Originally Posted by Builder View Post
    Be that as it may, here's a tutorial on drag and drop:
    http://w3schools.com/html5/html5_draganddrop.asp
    For a few hours I worked with the javascript and below is what I came up with.
    NOTE I HAVE NO EDUCATION IN ANY COMPUTER LANGUAGES. MERELY TRIAL AND ERROR WITH PLAYING AROUND WITH THE SCRIPT FOR A FEW HOURS UNTIL I GOT TO THE POINT WHERE I CAN NO LONGER SOLVE MY GOALS.

    Need help on the following:

    1) create a better/efficient code for the gap between the 2 rows of images.
    currently using paragraph breaks etc

    2A) need to modify the Drag n Drop script to allow images to be dragged onto other images in any rows of tables where onDrop a new image loads up replacing both the original image and the image that was Drag n Dropped.
    2b) optional the thumbnail position from which the Drag n Dropped image originated from to load another image that signifies (notifies the viewer) it has been moved.

    3) lastly if its possible to have 2 buttons
    (i) reset the last move played (ie. cancel the last move if it was a mistake)
    (ii) reset from beginning (basically a refresh page script can be used or if someone recommends a better code)

    Any help with listing links to the code that I need will be appreciated 1000 times.

    HERE IS THE CODE (MY HTML PAGE):

    <html>

    <head>

    <style type="text/css">
    #div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11, #div12, #div13, #div14, #div15, #div16,

    #div17, #div18, #div19, #div20
    {float:left; width:63px; height:87px; margin:1px;padding:1px;border:1px solid #aaaaaa;}
    </style>
    <script type="text/javascript">
    function allowDrop(ev)
    {
    ev.preventDefault();
    }

    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data ));
    ev.preventDefault();
    }
    </script>

    </head>

    <body>

    <div style="text-align:center;">

    <table bgcolor="#000000" border="0" cellspacing="0" cellpadding="2">
    <tr>
    <td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/1.png" draggable="true"

    ondragstart="drag(event)" id="drag1" width="63" height="87"></div></td>
    <td><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/2.png" draggable="true"

    ondragstart="drag(event)" id="drag2" width="63" height="87"></div></td>
    <td><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/3.png" draggable="true"

    ondragstart="drag(event)" id="drag3" width="63" height="87"></div></td>
    <td><div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/4.png" draggable="true"

    ondragstart="drag(event)" id="drag4" width="63" height="87"></div></td>
    <td><div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/5.png" draggable="true"

    ondragstart="drag(event)" id="drag5" width="63" height="87"></div></td>
    <td><div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/6.png" draggable="true"

    ondragstart="drag(event)" id="drag6" width="63" height="87"></div></td>
    <td><div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/7.png" draggable="true"

    ondragstart="drag(event)" id="drag7" width="63" height="87"></div></td>
    <td><div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/8.png" draggable="true"

    ondragstart="drag(event)" id="drag8" width="63" height="87"></div></td>
    <td><div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/9.png" draggable="true"

    ondragstart="drag(event)" id="drag9" width="63" height="87"></div></td>
    <td><div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/10.png" draggable="true"

    ondragstart="drag(event)" id="drag10" width="63" height="87"></div></tr>

    <td><div height="110"><p><br><p><br><p><br></div></tr>

    <td><div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/11.png" draggable="true"

    ondragstart="drag(event)" id="drag11" width="63" height="87"></div></td>
    <td><div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/12.png" draggable="true"

    ondragstart="drag(event)" id="drag12" width="63" height="87"></div></td>
    <td><div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/13.png" draggable="true"

    ondragstart="drag(event)" id="drag13" width="63" height="87"></div></td>
    <td><div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/14.png" draggable="true"

    ondragstart="drag(event)" id="drag14" width="63" height="87"></div></td>
    <td><div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/15.png" draggable="true"

    ondragstart="drag(event)" id="drag15" width="63" height="87"></div></td>
    <td><div id="div16" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/16.png" draggable="true"

    ondragstart="drag(event)" id="drag16" width="63" height="87"></div></td>
    <td><div id="div17" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/17.png" draggable="true"

    ondragstart="drag(event)" id="drag17" width="63" height="87"></div></td>
    <td><div id="div18" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/18.png" draggable="true"

    ondragstart="drag(event)" id="drag18" width="63" height="87"></div></td>
    <td><div id="div19" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/19.png" draggable="true"

    ondragstart="drag(event)" id="drag19" width="63" height="87"></div></td>
    <td><div id="div20" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/20.png" draggable="true"

    ondragstart="drag(event)" id="drag20" width="63" height="87"></div></tr>
    </tr>
    </table>
    </center>

    <p><br>

    </body>

    </html>


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •