WalterZorn Drag&Drop overflow problem

**Hywel** · 12-07-2008, 10:47 PM

I have recently found the wz_drag&drop script and have been impressed with its effectiveness.

Of course we all try to push the boundaries a bit so I have tried to use it in a simple application to review images and select a suitable action through drag and drop.

A cut down version of the page under development is shown at http://www.hywelsweb.com/imageoverflow.asp. I have transferred all appropriate css coding in-line to simplify understanding of what is going on. The script is in its eary days of development so please forgive over simplicity and laziness of structure. I need to resolve the basic capabilities of the script library before becoming a perfectionist.

The images are normally downloaded via FTP and displayed in the scrollable panel on the left of the page. This processing has been removed to shorten and simplify the code. 37 copies of the same image are now loaded, each then given a distinct 'img name=' which is duplicated in the SET_DHTML line.

The thumbnail images can be picked, dragged and dropped onto one of the three smaller boxes in the centre of the page (subsequent action will be taken with these dropped items once I have got the basic set-up working). As an image is picked a copy is enlarged and shown on the right, together with date and time derived from the filename which is shown below the enlarged image.

The problem, which is plainly obvious, is that the thumbnail images, if larger in number than the spaces in the panel simply continue to be displayed.

If the SET_DHTML line is removed, the images are contained within the scrollable panel, albeit with none of the drag&drop processing able to take place.

Any suggestions would be appreciated. Also, as a newcomer to coding at this level, can anyone tell me how to build up the tag names in the SET_DHTML rather than hard code them into the script. I know the number of images that will be downloaded at any time and all filenames have the same structure. A more elegant solution is surely possible.

**Hywel** · 12-08-2008, 09:10 AM

Sides the html output so the orry I'm a bit new to this. I forgot that viewing the code in-situ only provides the html output so trying to interpret what I've done is a bit like trying to find a neeedle in a haystack.

The original source is as follows. Only the 'wz_dragdrop.js' and the image file 'testimg_20081111131956.jpg' are external.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Image Overflow Problem</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>

<body  bgcolor="#FFFFFF">
      <script type="text/javascript" src="wz_dragdrop.js"></script>

<h2>Image Overflow Problem</h2>

<div id="gallery" style="width:1080px; height:600px; position:relative; border:1px solid #ddd; background:#f8f8f8;" >

 <ul style="list-style:none; padding:5px; margin:0; width:315px; float:left; height:560px; border:1px solid #444; overflow:auto;" >

   <%
     for i = 0 to 36

       if i < 1000 then istring = "0"                   'Code to pad out "img name" to avoid clash with "copies"
       if i < 100  then istring = "00"
       if i < 10 then istring = "000"

       imagestring =  "<li style=""display:inline; width:70px; height:65px; float:left; margin:0px 4px 4px 0px; border:1px solid #444; "">" &_
                      "<img name=""lyr" & istring & i & """ style="" width:70px; height:65px; align:left;"" src=""'""  alt="" ""; title="""">" &_
                      "</li>"
       Response.Write imagestring & "<br>"
     next
   %>

 </ul>
</div>

  <div id="bigframe" style="position:absolute;left:725px;top:120px;width:350px;height:250px;border:0px solid #ddd"><img  align="left"  src="" width="350" height="250" alt="" title="" /></div>
  <div id="box0" style="position:absolute;left:400px;top:150px;width:200px;height:130px;border:2px solid #ddd;"></div>
  <div id="box1" style="position:absolute;left:400px;top:320px;width:200px;height:130px;border:2px solid #ddd;"></div>
  <div id="box2" style="position:absolute;left:400px;top:490px;width:200px;height:130px;border:2px solid #ddd;"></div>
  <a id="imagetime" style="position:absolute;left:725px;top:380px;width:350px;height:25px;border:0px solid #ddd; text-align:center; color:blue; font-size:20px; font-family:"comic sans MS"></a>
  <a id="imagefilename"  style="position:absolute;left:725px;top:410px;width:350px;height:25px;border:0px solid #ddd; text-align:center; color:blue; font-size:20px; font-family:"comic sans MS"></a>

  </div>

<script type="text/javascript">
<!--


SET_DHTML(CURSOR_HAND, "lyr0000", "lyr0001", "lyr0002", "lyr0003", "lyr0004", "lyr0005", "lyr0006", "lyr0007", "lyr0008", "lyr0009",
                       "lyr0010", "lyr0011", "lyr0012", "lyr0013", "lyr0014", "lyr0015", "lyr0016", "lyr0017", "lyr0018", "lyr0019",
                       "lyr0020", "lyr0021", "lyr0022", "lyr0023", "lyr0024", "lyr0025", "lyr0026", "lyr0027", "lyr0028", "lyr0029",
                       "lyr0030", "lyr0031", "lyr0032", "lyr0033", "lyr0034", "lyr0035", "lyr0036", "lyr0037",
"box0"+NO_DRAG, "box1"+NO_DRAG, "box2"+NO_DRAG, "bigframe"+NO_DRAG );



var x          = 100 ;  // source left
var xw         = 70 ;  // source width
var y          = 150 ;  // source top
var yh         = 65 ;  // source height

var xdrop01    = 400 ;  // 1st drop left
var xdrop01w   = 200 ;  // 1st drop width
var ydrop01    = 150 ;  // 1st drop top
var ydrop01h   = 130 ;  // 1st drop height

var xdrop02    = 400 ;  // 2nd drop left
var xdrop02w   = 200 ;  // 2nd drop width
var ydrop02    = 320 ;  // 2nd drop top
var ydrop02h   = 130 ;  // 2nd drop height

var xdrop03    = 400 ;  // 3rd drop left
var xdrop03w   = 200 ;  // 3rd drop width
var ydrop03    = 490 ;  // 3rd drop top
var ydrop03h   = 130 ;  // 3rd drop height

start_x        = 0 ;
start_y        = 0 ;
var x_midpoint = 0 ;
var y_midpoint = 0 ;
var lastobj  = "";
var drop_pointx = 0;
var drop_pointy = 0;


function my_PickFunc()
{
       if (dd.obj.name == lastobj)
         {
           dd.elements[dd.obj.name].copies[0].setOpacity(1.0) ;
           dd.elements[dd.obj.name].copies[0].setDraggable(true) ;
         }
       else
         {
           lastobj = dd.obj.name ;
         }
       if (dd.elements[dd.obj.name].copies.length < 1 )
         {
           dd.elements[dd.obj.name].copy() ;
         }
       dd.elements[dd.obj.name].copies[0].moveTo(725,120) ;
       dd.elements[dd.obj.name].copies[0].resizeTo(350,250)  ;
       dd.elements[dd.obj.name].copies[0].setDraggable(false) ;

       document.getElementById("imagefilename").innerHTML = dd.obj.src.substring(dd.obj.src.length-26,dd.obj.src.length) ;
   var mystring = dd.obj.src.substring(dd.obj.src.length-26,dd.obj.src.length);
   var picturedateobj = new Date() ;
       picturedateobj.setFullYear(1*mystring.substring(8,12));
       picturedateobj.setMonth(1* mystring.substring(12,14)) ;
       picturedateobj.setDate(1* mystring.substring(14,16)) ;
       picturedateobj.setHours(1* mystring.substring(16,18)) ;
       picturedateobj.setMinutes(1* mystring.substring(18,20)) ;
       picturedateobj.setSeconds(1* mystring.substring(20,22)) ;
   var picturedatestringMinutes = picturedateobj.getMinutes() ;
       if (picturedatestringMinutes <10) { picturedatestringMinutes = "0" + picturedatestringMinutes }
   var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") ;
   var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December") ;
   var picturedatestring =  dayarray[picturedateobj.getDay()] + ", " + montharray[picturedateobj.getMonth()] + "  " + picturedateobj.getDate() + ", " + picturedateobj.getYear() + " at  " + picturedateobj.getHours() + ":" + picturedatestringMinutes ;
       document.getElementById("imagetime").innerHTML = picturedatestring ;

       start_x = dd.obj.x ;
       start_y = dd.obj.y ;
       x_midpoint = (xw/2) ;
       y_midpoint = (yh/2) ;

}

function my_DropFunc()
{


    if ((dd.obj.x + x_midpoint) > xdrop01 && (dd.obj.x + x_midpoint) < (xdrop01 + xdrop01w))
       {
         drop_pointx = dd.obj.x + x_midpoint;
         if ((dd.obj.y + y_midpoint) > ydrop01 && (dd.obj.y + y_midpoint) < (ydrop01+ydrop01h))
             {
               drop_pointy = dd.obj.y + y_midpoint;
               dd.elements[dd.obj.index].moveTo(xdrop01,ydrop01);
             }
         else
             {
               if ((dd.obj.y + y_midpoint) > ydrop02 && (dd.obj.y + y_midpoint) < (ydrop02 + ydrop02h))
                  {
                    drop_pointy = dd.obj.y + y_midpoint;
                    dd.elements[dd.obj.index].moveTo(xdrop02,ydrop02);
                  }
               else
                  {
                    if ((dd.obj.y + y_midpoint) > ydrop03 && (dd.obj.y + y_midpoint) < (ydrop03 + ydrop03h))
                       {
                         drop_pointy = dd.obj.y + y_midpoint;
                         dd.elements[dd.obj.index].moveTo(xdrop03,ydrop03);
                       }
                    else
                       {
                         drop_pointy = dd.obj.y + y_midpoint;
                         dd.elements[dd.obj.index].moveTo(start_x,start_y);
                       }
                  }
             }
       }
    else
       {
         drop_pointy = dd.obj.y + y_midpoint;
         drop_pointx = dd.obj.x + x_midpoint;
         dd.elements[dd.obj.index].moveTo(start_x,start_y);        // Not a valid drop reset to start position
       }

    document.getElementById("imagefilename").innerHTML = " " ;
    document.getElementById("imagetime").innerHTML = " " ;

    dd.elements[dd.obj.name].copies[0].moveTo(start_x,start_y) ;
    dd.elements[dd.obj.name].copies[0].resizeTo(70,65)  ;
    dd.elements[dd.obj.name].copies[0].setOpacity(0.3) ;
    dd.elements[dd.obj.name].copies[0].setDraggable(false) ;
}

//-->
</script>

</body>
</html>


</body>
</html>

Hope this enables somebody to respond. At least tell me if my enquiry is appropriate for this forum or should I look elsewhere.

Thread: WalterZorn Drag&Drop overflow problem

Thread Tools

Search Thread

WalterZorn Drag&Drop overflow problem

Bookmarks

Bookmarks

Posting Permissions