1// use id
2$( "#sortable" ).sortable();
3$( "#sortable" ).disableSelection();
4
5
6<html lang="en">
7<head>
8 <meta charset="utf-8">
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <title>jQuery UI Sortable - Default functionality</title>
11 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
12 <style>
13 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
14 #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
15 #sortable li span { position: absolute; margin-left: -1.3em; }
16 </style>
17 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
18 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
19 <script>
20 $( function() {
21 $( "#sortable" ).sortable();
22 $( "#sortable" ).disableSelection();
23 } );
24 </script>
25</head>
26<body>
27
28<ul id="sortable">
29 <label> welcome </label>
30 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
31 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
32 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
33 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
34 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
35 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
36 <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
37</ul>
38
39
40</body>
41</html>
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>DRAG_AND_DROP</title>
7 <style>
8 body{
9 background-color: aquamarine;
10}
11.whiteBox{
12 height: 250px;
13 width: 250px;
14 background-color: rgb(55, 238, 245);
15 margin: 10px;
16 display: inline-block;
17 border: 2px solid red;
18}
19.imgBox{
20
21 display: flex;
22 background-image: url("image.jpg");
23 height: 230px;
24 width: 230px;
25 position: relative;
26 top: 10px;
27 margin:0 auto;
28 cursor: pointer;
29
30}
31.imgBox1{
32
33 display: flex;
34 background-image: url("image.jpg");
35 height: 230px;
36 width: 230px;
37 position: relative;
38 top: 10px;
39 margin:0 auto;
40 cursor: pointer;
41
42}
43.hold{
44 border: 2px dashed rgb(118, 182, 0);
45}
46.hide{
47 display: none;
48}
49.dragenter{
50 background: rgb(221, 115, 96);
51 border-color: green;
52 border-style: groove;
53}
54 </style>
55</head>
56<body>
57 <div class="whiteBox">
58 <div class="imgBox" draggable="true"></div>
59 </div>
60 <div class="whiteBox"></div>
61 <div class="whiteBox"></div>
62 <div class="whiteBox"></div>
63 <script>
64 console.log("D&D");
65
66let imgBox = document.querySelector(".imgBox");
67let whiteBoxes = document.querySelectorAll(".whiteBox");
68
69imgBox.addEventListener("dragstart", (e) => {
70 console.log("DRAG STARTED");
71 e.target.className += " hold";
72 setTimeout(() => {
73 e.target.className += " hide";
74 }, 0);
75});
76imgBox.addEventListener("dragend", (e) => {
77 console.log("DRAG ENDED");
78 e.target.className = "imgBox";
79});
80
81for (whiteBox of whiteBoxes) {
82 whiteBox.addEventListener("dragover", (e) => {
83 e.preventDefault();
84 // console.log("gj")
85 });
86 whiteBox.addEventListener("dragenter", (e) => {
87 e.target.className += " dragenter";
88 });
89 whiteBox.addEventListener("dragleave", (e) => {
90 e.target.className = "whiteBox";
91 });
92 whiteBox.addEventListener("drop", (e) => {
93 let answer= confirm("Do you really want to move it")
94 console.log(answer)
95 if(answer){
96 e.target.append(imgBox)}
97 else{
98 e.target.className = "whiteBox";
99
100 }
101 });
102}
103
104 </script>
105</body>
106</html>
107
1<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
2 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
3 <script>
4 $( function() {
5 $( "#sortable" ).sortable();
6 $( "#sortable" ).disableSelection();
7 } );
8 </script>
9
10<div id="sortable">
11 <div>Item 1</div>
12 <div>Item 2</div>
13 <div>Item 3</div>
14 <div>Item 4</div>
15 <div>Item 5</div>
16 <div>Item 6</div>
17 <div>Item 7</div>
18</div>
19
20