dezplazar menu con el maus tanto izquierda como derecha

jor_0203 · #1 (**permalink**) 31/10/2011, 11:11

como puedo hacer para que las etiquetas o menus como le quieran llamar se puedan desplazar tanto a la la izquierda como la la derecha con el maus

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
 
 
<style type="text/css">
<!--
.contenedor {
    position: absolute;
    background-color: #FF9966;
    left: 214px;
    top: 35px;  
}
 
.contenedor .menu li {
    float: left;
    margin-right: 20px;
    list-style-type: none;
    margin-left: 30px;
    
}
-->
</style>
</head>
 
<body>
<div class="contenedor">
<div class="menu">
  <ul>
    <li>home </li>
    <li>ventas</li>
    <li>contacto</li>
    <li>visitas</li>
  </ul>
  </div>
</div>
</body>
</html>

esto nos va ha servir a todos ya que podremos hacer menus como yahoo, el cual sus menus los podemos mover,
ojala que por ahí aparezca una persona ,pero que lo haya hecho en javascript
no lo busco en jquery ya que eso no es programar

Eso seria un gran aporte

jor_0203 · #2 (**permalink**) 01/11/2011, 02:03

les voy a poner un ejemplo para que vean mas o menos lo que estoy buscando

Código HTML:

Ver original<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function m(oEvent) {
                    if (oEvent.button == 1) {
                    oEvent.srcElement.dragDrop();
                                            }
                   }
            
            function n(oEvent) {
                oEvent.dataTransfer.setData("text", "This is a red square");
            }                        
        </script>
</head>
    <body>
 <p>arastra el contenido alimput con el maus</p>
 <p>
<div style="background-color: red; height: 100px; width: 100px" onmousemove="m(event)" ondragstart="n(event)">arrastrame</div>
 </p>
        <p><input type="text" value="" /></p>
    </body>
</html>

jor_0203 · #3 (**permalink**) 01/11/2011, 04:56

les dejo otro ejemplo padrisimo
esto me motiva mucho

Código PHP:

Ver original<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function pasar() {
                alert("Dropped!");
            }
        </script>
    </head>
    <body>
        <p>selecciona la palabra jorge y arrastrala a la otra casilla </p>
        <input type="text" value="jorge" /><input type="text" ondrop="pasar()" />
    </body>
</html>