CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5915322
user5915322

Reputation:

Make the whole div sortable

I have a problem , where I can't find the answer on.

I have a div , where the data comes from a database. (loop)

I try to make the div's sortable.(The whole div (not a part of it)

(that i can move the whole div to another row)

I searched for answer and tried:

https://jqueryui.com/sortable/

jquery .sortable() on <div> (i think this is the answer but couldn't fix it)

jQuery UI sortable divs across multiple containers or parents

even the drag and drop of the jquery ui

https://api.jqueryui.com/draggable/#option-helper

    $(".Regel").sortable({
    });
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

<div class="Regel">
		<span class="ui-icon ui-icon-closethick" ></span>
			<div><input size="23" maxlength="250"></div>
			<div><input size="23" maxlength="50" ></div>
			<div><input name="Links_Omschrijving" size="23" maxlength="100"></div>

			<div>
				<select>
					<option value="VerkoopAankoop">Something</option>
					<option>Onething</option>
					<option >AnotherThing</option>
				</select>
			</div>
	</div> 
  
  <br><br>
  
  <div class="Regel">
		<span class="ui-icon ui-icon-closethick" ></span>

http://jsfiddle.net/wPtjM/4/ tried but failed

https://api.jqueryui.com/sortable/

https://jsfiddle.net/ramnathv/1064q7jm/

and tried many more.

I changed my div to create an jsfiddle and made 2 of the same div

I use in my code sortable (I think is the wrong method, but everything i could find)

Upvotes: 2

Views: 3364

Answers (1)

Haresh Vidja
Haresh Vidja

Reputation: 8496

Simply you can use parent div for make whole div sortable.

$(".Regel").parent().sortable({});
  //OR  $("#container").sortable({});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<div id="container">
    <div class="Regel">
        <span class="ui-icon ui-icon-closethick" ></span>
	    <div><input size="23" maxlength="250"></div>
		<div><input size="23" maxlength="50" ></div>
		<div><input name="Links_Omschrijving" size="23" maxlength="100"></div>
		<div>
		    <select>
			    <option value="VerkoopAankoop">Something</option>
				<option>Onething</option>
				<option >AnotherThing</option>
			</select>
		</div>
	</div> 
  
  <br><br>
  
  <div class="Regel">
	 <span class="ui-icon ui-icon-closethick" ></span>
     AAAAAAAAAAAAAAAAAAA
  </div>
  <div class="Regel">
    <span class="ui-icon ui-icon-closethick" ></span>
    BBBBBBBBBBBBBBBBBBBBBBBBB
  </div>

Upvotes: 2

Related Questions