drag and drop sorting

Solutions on MaxInterview for drag and drop sorting by the best coders in the world

showing results for - "drag and drop sorting"

29 Apr 2019

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>

source

Pietro

13 May 2020

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

Martina

01 May 2020

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

similar questions

dragula filter javascript drag and drop list on drop 2c drag 2c dragover event angular drag and drop js draggable angularjs drag and drop jquery sortable on div drag and drop drag drop image js make element draggable

queries leading to this page