-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (70 loc) · 3.52 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Anilmaktala.github.com : " />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Anilmaktala.github.com</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/AnilMaktala">View on GitHub</a>
<h1 id="project_title">Anilmaktala.github.com</h1>
<h2 id="project_tagline"></h2>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h3>Two Sided Multi Draggable Component</h3>
<h3>Contents</h3>
<ul>
<li>1 About: 1</li>
<li>2 Description: 1</li>
<li>3 Frameworks used: 1</li>
<li>4 Features present: 1</li>
<li>5 How to integrate: 2</li>
<li>6 Attachments: 2</li>
<li>7 Screenshots: 3</li>
</ul><h3>About:</h3>
<p>This document gives the information required to integrate the “Two Sided Multi Draggable Component” into the html with the help of attached .js and .css files.</p>
<h3>Description:</h3>
<p>Two Sided Multi Draggable Component, as the name suggests, this component is used for dragging list of apps from one list to another in both directions.</p>
<h3>Frameworks used:</h3>
<ul>
<li>1. jQuery JavaScript Library v1.8.3</li>
<li>2. jQuery UI - v1.9.2
### Features present:
Following are the features provided by this component:</li>
<li>1. Drag single/Multiple apps from one list to another list.</li>
<li>2. Selection of multiple list apps using ‘Ctrl+mouse click’ and ‘shift+mouse click’.</li>
<li>3. Right and Left Arrow buttons to move single/multiple apps between the lists.</li>
<li>4. Up and Down arrows for second list for moving the position of an app within the list.</li>
<li>5. Restrict to maximum number of apps present in second list.</li>
</ul><h3>How to integrate:</h3>
<ul>
<li>1. Include the .js and .css provided by this component.</li>
<li>2. Create a container HTML Div element in the html file where this component is to be used. For example:</li>
<li> <div></div>
</li>
<li>3. Call the initialization method “multiDraggableComponent()” on this div with appropriate parameters. For example:</li>
<li> document.getElementById('# draggableContainer).multiDraggableComponent({ availableApps: [], selectedApps: [], moveOptions: true/false, maxSelected: Number });
There are four parameters used while calling the method:</li>
<li>a. availableApps: This represents array of apps that should be present on the left side list of the component. This doesn’t have any maximum number of apps limit.</li>
<li>b. selectedApps: This represents array of apps that should be present on the right side list of the component. This has maximum number of apps limitation.</li>
<li>c. moveOptions: This boolean value represents the presence of Up and Down arrows that are used to move the app top or bottom in the same list.</li>
<li>d. maxSelected: This integer value represents the maximum number of apps that should be present in the second list of apps.</li>
</ul>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
</body>
</html>