S.Oruc S.Oruc - 2 months ago 12
jQuery Question

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)

Answer

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>