Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2003
    Location
    Atlanta, GA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Targeted Drag and Drop Script modification help.

    I have found some drag and drop code on the web and modified it a little by taking out some of the stuff I didn't need but being new to Javascript I need a little help to figure something out.

    This sample allows you to drag an image in a table to another position and swaps the images. Rather than just swap the images I would like to have it insert the image and move the other images down one position. (or up) What would be even better is to have a radio button to specify whether you want to swap or insert the image.

    This sample has 16 images but eventually I plan for the IMG SRC to come from a database so there could be many more or even fewer images. It will always have 4 columns but a varying number of rows depending in the number of images.

    Any thoughts on how to go about it?

    The .zip includes the code and 16 small images
    Attached Files Attached Files

  • #2
    New to the CF scene
    Join Date
    Dec 2003
    Location
    Atlanta, GA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the code in case anyone doesn't want to download the .zip



    <STYLE TYPE="TEXT/CSS">
    <!--
    .dnd{font:10pt Verdana; font-weight:bold;padding:4pt;background-color:gray;width:120}
    .dnd IMG {cursor:move}
    }
    -->
    </STYLE>


    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var DragEl;
    var TheTimer;


    if(document.all){
    document.onmousedown=DragStart;
    document.onmouseup=DragEnd;
    document.onmousemove=DoDrag;
    }

    //Generic absolute position retrieval function
    function getRealPos(i,which) {
    iPos = 0
    while (i!=null) {
    iPos += i["offset" + which]
    i = i.offsetParent
    }
    return iPos
    }

    function getFileName(PathStr){
    return PathStr.substr(PathStr.lastIndexOf("/")+1)
    }

    function DragStart(){
    clearTimeout(TheTimer);
    el=event.srcElement;
    if(el.parentElement.className=='dnd'){
    DragEl=el;
    InitLeft=event.clientX;
    InitTop=event.clientY;
    floater.style.pixelTop=getRealPos(el,"Top");
    InitEltop=floater.style.pixelTop;
    floater.style.pixelLeft=getRealPos(el,"Left");
    InitElleft=floater.style.pixelLeft;
    floater.children[0].src=el.src;
    el.src='images/trans.jpg';
    floater.style.visibility='visible';
    }
    }

    function DragEnd(){
    var i;

    if(!DragEl) return;

    //Get co-ordinates
    X1=floater.style.pixelLeft;
    Y1=floater.style.pixelTop;
    MaxArea=0;
    TargetElem=null;

    //Cycle through prospective targets
    Targets=document.all;
    for(i=0;i<Targets.length;i++)
    if(Targets[i].className=="dnd"){
    X2=getRealPos(Targets[i].children[0],"Left");
    Y2=getRealPos(Targets[i].children[0],"Top");
    hOverlap=floater.offsetWidth-Math.abs(X2-X1);
    vOverlap=floater.offsetHeight-Math.abs(Y2-Y1);
    //alert(hOverlap+";"+vOverlap)
    areaOverlap=((hOverlap>0)&&(vOverlap>0))?hOverlap*vOverlap:0;
    if(areaOverlap>MaxArea){
    MaxArea=areaOverlap;
    TargetElem=Targets[i];
    }
    }


    floater.style.visibility='hidden';

    if(TargetElem){
    //Swap Images
    DragEl.src=TargetElem.children[0].src;
    TargetElem.children[0].src=floater.children[0].src;
    }
    else{
    DragEl.src=floater.children[0].src;
    return;
    }


    }

    function DoDrag(){
    if(DragEl){
    floater.style.pixelLeft=event.clientX+InitElleft-InitLeft;
    floater.style.pixelTop=event.clientY+InitEltop-InitTop;
    return false;
    }
    }

    //-->
    </SCRIPT>




    <!--********************** Start of demo *******************-->
    <TABLE CELLPADDING=0 CELLSPACING=0 WIDTH=0 BORDER=0>
    <TR>
    <TD>


    <DIV ID="POS1" class="dnd">
    <IMG SRC="images/1.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/2.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>


    <TD>
    <DIV class="dnd">
    <IMG SRC="images/3.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/4.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    </TR>
    <TR>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/5.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/6.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/7.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/8.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    </TR>
    <TR>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/9.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/10.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/11.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/12.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>


    </TR>
    <TR>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/13.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/14.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/15.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>

    <TD>
    <DIV class="dnd">
    <IMG SRC="images/16.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>
    </TD>




    <DIV ID="floater" style="visibility:hidden;position:absolute">
    <IMG SRC="images/trans.jpg" BORDER=0 ALIGN="CENTER">
    </DIV>


    </TR>
    </TABLE>
    <!--******************** End of Demo *******************-->


  •  

    Posting Permissions

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