Demo Dynamic HTML - Mover objetos de un marco a otro

Mover objetos en marcos

Compatibilidad: Ms Internet Explorer

Esta demos, compatible sólo con MSIE, permite mover, arrastrando el ratón, una imagen o bloques de cabecera de un marco a otro. Para ello, es necesario utilizar los dos botones del ejemplo.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<STYLE TYPE="text/css">
         .list {cursor:hand; overflow:auto; height:75pt; width:150pt;
            border:1pt black solid}
         .list UL {list-style-type:none; margin-left:2pt;
            margin-top:0pt; margin-bottom:0pt}
         .list UL LI {margin-top:0pt; margin-bottom:0pt}
         .list UL LI.selected {background:navy; color:white}
      </STYLE>

<SCRIPT LANGUAGE="JavaScript">
         function checkParent(src, tag) {
            while ("HTML" != src.tagName) {
               if (tag == src.tagName)
                  return src;
               src = src.parentElement;
            }
            return null;
         }

function copy(src, dest) {
            var elSrc = document.all[src];
            var elDest = document.all[dest];
            if (elSrc.selected != null) {
               elSrc.selected.className = "";
               elDest.insertAdjacentHTML("beforeEnd",
                  elSrc.selected.outerHTML);
               elSrc.selected.outerHTML = "";
               elSrc.selected = null; // reset selection
            }
         }
      </SCRIPT>

</HEAD>

<BR><BR>
<CENTER>      <TABLE>
         <TR> 
            <TD>
               <DIV CLASS="list">
                  <UL ID="src" ONCLICK="selectItem(this);"
                        ONDBLCLICK="copy('src', 'dest');">
                     <LI>HTML <EM>.it</EM></LI>
                     <LI>El sitio italiano del web publishing</LI>
                     <LI><IMG SRC="logo.gif" ALT="HTMLpoint, recursos para páginas web" BORDER=0></LI>
                     <LI>Dynamic HTMLpoint</LI>
                    
                  </UL>
               </DIV>
            </TD><TD>
               <P><INPUT TYPE=BUTTON VALUE="->"
                  ONCLICK="copy('src', 'dest');">
               <P><INPUT TYPE=BUTTON VALUE="<-"
                  ONCLICK="copy('dest', 'src');">
            </TD><TD>
               <DIV class="list">
                  <UL ID="dest" ONCLICK="selectItem(this);"
                     ONDBLCLICK="copy('dest','src');">
                  </UL>
               </DIV>
            </TD>
         </TR>
      </TABLE></CENTER>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]