본문 바로가기
BootStrap/Bootstrap Sample File

HOW TO MAKE DRAGDROP AND SORTABLE WIDGETS WITH JQUERY UI AND BOOTSTRAP

hookbox 2015. 11. 15. 10:16

In this article I will discuss about the jquery ui also similar to the previous article , but this time I will discuss using sortable that supports drag and drop .

In this article I explain that how to make drag and drop and sortable commonly used on the blog site that supports drag Drog and sortable on widgets or on listview .




To make this project that you need to get is a plugin jquery , jquery ui and bootstrap . if you want, you can go to download on their official website .




After you download the plugin jquery , jquery ui and bootstrap , then extract the plugin in the new folder and create a new html document named index.html and copy the existing syntax below into 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta <span id="IL_AD10" class="IL_AD">charset</span>="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Widgets Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <<span id="IL_AD11" class="IL_AD">style</span>>
      #widgets { float: right; width: 100%; min-height: 18em; padding: 1%; }
      #widgets h4 { line-height: 16px; margin: 0 0 0.4em; padding: 0.4em;}
       
       #sortable1, #sortable2 {
 border: 1px solid #eee;
 width: 100%;
 min-height: 20px;
 list-style-type: none;
 margin: 0;
 padding: 5px 0 0 0;
 float: left;
 margin-right: 10px;
      }
      #sortable1 li, #sortable2 li {
 margin: 0 5px 5px 5px;
 padding: 5px;
 font-size: 1.2em;
 width: 96%;
      }
    </style>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via <span id="IL_AD8" class="IL_AD">file</span>:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <p>
</p>
    <div class="container">
      <div class="row">
 <div class="col-xs-6 col-sm-6 col-md-6">
    
   <ul id="sortable1" class="connectedSortable">
     <li class="ui-state-highlight">New Widget 1</li>
     <li class="ui-state-highlight">New Widget 2</li>
     <li class="ui-state-highlight">New Widget 3</li>
     <li class="ui-state-highlight">New Widget 4</li>
     <li class="ui-state-highlight">New Widget 5</li>
     <li class="ui-state-highlight">New Widget 6</li>
     <li class="ui-state-highlight">New Widget 7</li>
   </ul>
  
 </div>
 <div class="col-xs-6 col-sm-6 col-md-6">
    
   <div id="widgets" class="ui-widget-content ui-state-default">
     <h4 class="ui-widget-header"> Widget Sidebar</h4>
   <ul id="sortable2" class="connectedSortable">
     <li class="ui-state-default">Old Widget 1</li>
     <li class="ui-state-default">Old Widget 2</li>
     <li class="ui-state-default">Old Widget 3</li>
     <li class="ui-state-default">Old Widget 4</li>
     <li class="ui-state-default">Old Widget 5</li>
   </ul>
   </div>
    
 </div>
      </div>
    </div>
 
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
      $(function() {
 $( "#sortable1, #sortable2" ).sortable({
   connectWith: ".connectedSortable"
 }).disableSelection();
      });
    </script>
  </body>
</html>


Explanation :

1. The first stage is to create an html document seseuai bootstrap guidelines

?
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Widgets Template</title>
     
  </head>
  <body>
    <p>
</p>
    <div class="container">
      <div class="row">
 <div class="col-xs-6 col-sm-6 col-md-6">
    
 </div>
 <div class="col-xs-6 col-sm-6 col-md-6">
    
 </div>
      </div>
    </div>
 
  </body>
</html>


2. The second stage is to call the plugin that you've downloaded

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>


3. The third stage is the design of the form to listview or widgets

?
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
      #widgets { float: right; width: 100%; min-height: 18em; padding: 1%; }
      #widgets h4 { line-height: 16px; margin: 0 0 0.4em; padding: 0.4em;}
       
       #sortable1, #sortable2 {
 border: 1px solid #eee;
 width: 100%;
 min-height: 20px;
 list-style-type: none;
 margin: 0;
 padding: 5px 0 0 0;
 float: left;
 margin-right: 10px;
      }
      #sortable1 li, #sortable2 li {
 margin: 0 5px 5px 5px;
 padding: 5px;
 font-size: 1.2em;
 width: 96%;
      }
 
<ul id="sortable1" class="connectedSortable">
     <li class="ui-state-highlight">New Widget 1</li>
     <li class="ui-state-highlight">New Widget 2</li>
     <li class="ui-state-highlight">New Widget 3</li>
     <li class="ui-state-highlight">New Widget 4</li>
     <li class="ui-state-highlight">New Widget 5</li>
     <li class="ui-state-highlight">New Widget 6</li>
     <li class="ui-state-highlight">New Widget 7</li>
   </ul>
 
<div id="widgets" class="ui-widget-content ui-state-default">
     <h4 class="ui-widget-header"> Widget Sidebar</h4>
   <ul id="sortable2" class="connectedSortable">
     <li class="ui-state-default">Old Widget 1</li>
     <li class="ui-state-default">Old Widget 2</li>
     <li class="ui-state-default">Old Widget 3</li>
     <li class="ui-state-default">Old Widget 4</li>
     <li class="ui-state-default">Old Widget 5</li>
   </ul>
   </div>


4. The fourth stage is creating effects and motion to run dragdrop and sortable widgets or listview

?
1
2
3
4
5
$(function() {
 $( "#sortable1, #sortable2" ).sortable({
   connectWith: ".connectedSortable"
 }).disableSelection();
      });


'BootStrap > Bootstrap Sample File' 카테고리의 다른 글

HOW TO MAKE MODAL (POPUP/DIALOG) USING JQUERY  (0) 2015.11.15
HOW TO CREATE A NAVIGATION MENU DROPDOWNS USING JQUERY  (0) 2015.11.15
HOW TO MAKE AUTOCOMPLETE USING JQUERY UI AND BOOTSTRAP  (0) 2015.11.15
HOW TO MAKE ACCORDION USING JQUERY UI AND BOOTSTRAP  (0) 2015.11.15
CRUD (CREATE, READ, UPDATE, DELETE, PAGINATION) USING PHP PDO AND BOOTSTRAP  (0) 2015.11.15

'BootStrap/Bootstrap Sample File' Related Articles

티스토리툴바