panter / scriptaculous-multidrag
watch download tarball
public
Forks1Right
Watchers8Right
Description: scriptaculous sortable w/ multiple selectable elements
Homepage: http://simplificator.com/scriptaculous-multidrag/
Clone URL: git://github.com/panter/scriptaculous-multidrag.git
100644 160 lines (144 sloc) 3.981 kb
raw blame history 
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Multi Drag and Drop / Sortable</title>
    <style type="text/css" media="screen">
      body {
        margin: 0;
        margin-bottom: 25px;
        padding: 0;
        background-color: #f0f0f0;
        font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana";
        font-size: 13px;
        color: #333;
      }
      
      h1 {
        font-size: 28px;
        color: #000;
      }
      
      a  {color: #03c}
      a:hover {
        background-color: #03c;
        color: white;
        text-decoration: none;
      }
      
      
      #page {
        background-color: #f0f0f0;
        width: 750px;
        margin: 0;
        margin-left: auto;
        margin-right: auto;
      }
      
      #content {
        float: left;
        background-color: white;
        border: 3px solid #aaa;
        border-top: none;
        padding: 25px;
        width: 500px;
      }
      
      #sidebar {
        float: right;
        width: 175px;
      }
 
      #footer {
        padding: 10px;
        text-align: center;
        clear: both;
      }
 
      #sortable {
        list-style: none;
        padding: 0px;
        height: 500px;
      } 
      
      #sortable li {
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid black;
        font-size: 300%;
        text-align: center;
        margin: 10px;
      }
      #target {
        height: 600px;
        border: 2px dotted black;
        list-style-type: none;
        padding: 2px;
        font-size: 75%;
        overflow: auto;
      }
      .dropmarker {
        margin-top: 5px;
        height: 90px;
        width:    2px;
        background-color: red;
      }
      .activated {
        background-color: yellow;
      }
      .dragcount {
        z-index:  1001;
        font-size: 12px;
        border: 2px solid red;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        position: relative;
        left: 73px;
        top:  25px;;
      }
      
    </style>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="effects.js"></script>
    <script type="text/javascript" src="dragdrop.js"></script>
    <script type="text/javascript" src="multidrag.js"></script>
    <script type="text/javascript" src="demo.js"></script>
  </head>
  <body>
    <div id="page">
      <div id="sidebar">
        <h3>Drop target area</h3>
        <ul id='target'></ul>
      </div>
 
      <div id='content'>
 
      <h1>Scripty sortable / multi drag drop example</h1>
      <p>
          Click on multiple elements to resort or drag them at once /
          use shift+click to select more than one element at once /
          click between the elements to deselect all activated elements.
      </p>
 
        <ul id="sortable">
        <!-- make sure your ids begin with xxxx_ Sortable.sequence won't
             work if not! -->
          <li id='item_0'>0</li>
          <li id='item_1'>1</li>
          <li id='item_2'>2</li>
          <li id='item_3'>3</li>
          <li id='item_4'>4</li>
          <li id='item_5'>5</li>
          <li id='item_6'>6</li>
          <li id='item_7'>7</li>
          <li id='item_8'>8</li>
          <li id='item_9'>9</li>
          <li id='item_A'>A</li>
          <li id='item_B'>B</li>
          <li id='item_C'>C</li>
          <li id='item_D'>D</li>
          <li id='item_E'>E</li>
          <li id='item_F'>F</li>
        </ul>
 
      </div>
      
      <div id="footer">
        <a href='http://github.com/panter/scriptaculous-multidrag'>
          View the source...
        </a>
      </div>
    </div>
  </body>
</html>