Revision 3093706d1947 () - Diff

Link to this snippet: https://friendpaste.com/3JACC6YaCD3XEzNAGewTCU
Embed:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>droppable</title>
    
    <style>
      body {
        font-family: Helvetica;
        background: gray;
        color: white;
        font-family: monospace;
        font-size: 110%;
      }
      
      #forum {
        position: relative;
      }
      
      .cargo {
        position: absolute;
        left: 10px;
        width: 20px;
        height: 20px;
        background: #3366cc;
        
      }
      
      #container {
        position: absolute;
        left: 200px;
        width: 250px;
        height: 100px;
        background: #66cc33;
      }
      
      #panel {
        width: 500px;
        position: relative;
        top: 150px;
      }
      
      #setup {
        background: black;
        float: right;
        cursor: pointer;
        padding: 2px;
      }
      
    </style>

    <script src="jquery.js" type="text/javascript"></script> <!-- Tested against 1.2.6 - Rev 5685 -->
    <script src="jquery.ui.all.js" type="text/javascript"></script> <!-- Tested against 1.5.2 -->
    
    <script type="text/javascript">
    
      var createDraggableAndDroppable = function () {
        $("#forum").append("<div class='cargo'></div>");
        $(".cargo").draggable();
        
        $("#container").droppable({
          accept: ".cargo",
          drop: function () {
            $("#log").append("<br/>dropped!");
          }
        });
      };
          
      var launch = function () {
        $("#setup").click(createDraggableAndDroppable);
      };
            
      $(document).ready(launch);
    
    </script>
  </head>
    
  <body>
    
    <p>
      Click setup and drag the blue box onto the green box. Rinse and repeat.
      <br/>
      drop new and old blue boxes to see different numbers of invocations
    </p>
    
    <div id="forum">
    
      <div id="container"></div>
      
    </div>  
    
    <div id="panel">
      <div id="setup">setup</div>
      <div id="log">Drop Invocations</div>
    </div>
    
  </body>

</html>