Bug Tracker

Changeset 5569 for branches/paul-dev

Show
Ignore:
Timestamp:
05/12/08 16:33:58 (8 months ago)
Author:
paul.bakaus
Message:
 
Location:
branches/paul-dev
Files:
14 added
1 modified

Legend:

Unmodified
Added
Removed

  • branches/paul-dev/dyn/draggable.html

    r5550 r5569  
    44    <head> 
    55        <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    6         <title>Dynamic Flow Demo</title> 
     6        <title>Drag & Drop</title> 
    77        <style type="text/css" media="screen"> 
    88            body,html { 
    … …  
    1313            } 
    1414         
    15             div.winamp { 
     15            div.parent, div.parent2 { 
     16                position: relative; 
     17                z-index: 10; 
     18            } 
     19             
     20            div.parent div.winamp { 
    1621                background: #eee; 
    1722                position: relative; 
    1823                top: 50px; 
    1924                left: 50px; 
     25            } 
     26             
     27            div.parent2 div.winamp { 
     28                background: #eee; 
     29                float: left; 
     30                height: 100px; 
     31                width: 100px; 
     32                margin: 20px; 
     33            } 
     34             
     35            div.parent div.one { 
     36                height: 116px; width: 275px; background-image: url(main.png); 
     37            } 
     38             
     39            div.parent div.two { 
     40                height: 116px; width: 275px; background-image: url(eq.png); 
     41            } 
     42             
     43            div.parent div.three { 
     44                height: 145px; width: 275px; background-image: url(playlist.png); 
     45            } 
     46                     
     47            .helper { 
     48                border: 1px solid black; 
     49                padding: 3px; 
     50                background: white; 
     51            } 
     52             
     53            .target { 
     54                position: absolute; 
     55                top: 20px; 
     56                right: 20px; 
     57                height: 200px; 
     58                width: 200px; 
     59                background: #666; 
     60            } 
     61             
     62            div.active { 
     63                background: #aaa; 
     64            } 
     65             
     66            div.hover { 
     67                background: green; 
    2068            } 
    2169        </style> 
    … …  
    2674    <script src="../../../trunk/ui/ui.droppable.js" type="text/javascript" charset="utf-8"></script> 
    2775                     
    28         <script type="text/javascript" charset="utf-8"> 
    29             $(document).ready(function() { 
     76    <script type="text/javascript" charset="utf-8"> 
     77        $(document).ready(function() { 
    3078 
    3179 
    32                 $("div.winamp").draggable({ 
    33                     distance: 0, 
    34                     snap: "div.winamp", 
    35                     //snapMode: "outer", //This makes it total winamp-like 
    36                     //snapTolerance: 10, 
    37                     stack: { 
    38                         group: "div.winamp", 
    39                         min: 1 
    40                     } 
    41                 }); 
    42  
     80            $("div.winamp").draggable({ 
     81                //distance: 0, 
     82                //snap: "div.winamp", 
     83                //snapMode: "outer", //This makes it total winamp-like 
     84                //snapTolerance: 10, 
     85                //stack: { 
     86                //  group: "div.winamp", 
     87                //  min: 1 
     88                //} 
     89                 
     90                //axis: "y", 
     91                //grid: [20,20], 
     92                 
     93                //helper: function() { return $("<div class='helper'>I'm the helper</div>")[0]; }, 
     94                //cursorAt: { top: -5, left: -5 } 
    4395            }); 
    4496             
    45         </script> 
     97            $(".target").droppable({ 
     98                //accept: function(draggable) { return draggable.css("float") != "none"; }, 
     99                hoverClass: "hover", 
     100                activeClass: "active", 
     101                //tolerance: "fit" 
     102            }); 
     103 
     104        }); 
     105         
     106    </script> 
    46107    </head> 
    47108    <body> 
    48109 
    49         <div class="winamp one" style="height: 116px; width: 275px; background-image: url(main.png);"></div> 
    50         <div class="winamp three" style="height: 116px; width: 275px; background-image: url(eq.png);"></div> 
    51         <div class="winamp two" style="height: 145px; width: 275px; background-image: url(playlist.png);"></div> 
     110        <div class="parent2"> 
     111            <div class="winamp one"></div> 
     112            <div class="winamp two"></div> 
     113            <div class="winamp three"></div> 
     114        </div> 
     115         
     116        <div class="target"> 
     117        </div> 
     118         
     119         
     120 
    52121 
    53122    </body>