Jquery ui sortable doesn't sort on half-top-height drag

Question

SOLVED: containment: $("#sortable").parent().parent();

UPDATE: Here is video explanation for this.

I really don't know how to ask this question, I don't know how it works neither so I need a little help here:

When I drag second item from list and lets say item height is 50px, when I click and drag from 0-25px from top to bottom on item to drag it to first place, first one move down, but if I click and drag from 26-50px from top to bottom on item and try to move on a first place the first item doesn't go down.

Now I am guessing that it works with mouse position and half item height as if mouse position is over not dragging item less than some 50% item height it moves down, otherwise it doesn't move.

How can I change that in way that it maybe lock dragging item to mouse on 50% top position or where ever is clicked and moved over some element to move down?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
 div{
    width: 60%;
    height: auto;
    padding: 20px 0;
    background: red;
 }
 </style>
  <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>
  <script>
  $( function() {
    $( "#sortable" ).sortable({
     containment: $("#sortable").parent().parent(), 
     update: function(){
         alert('Dropped!'); 
        }
    });
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>
<div>
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
 
 
</body>
</html>

I dunno why but your example fiddle doesn't work :(, here i post the same code i didn't go your problem. https://codepen.io/headmax/pen/QqLRBa — , Sep 12 '17 at 09:22
It is same as mine.... You probably don't understand I will record a little video to show you what do I mean. — , Sep 12 '17 at 09:26
@headmax I just tried on mozila, torch and some IE i have I cant even open codepen site hah — , Sep 12 '17 at 09:51
ok try to add a margin in #sortable example 20px; may be this is solve your problem — , Sep 12 '17 at 09:52
I found a little solution, but still I am looking for better one if exists. Remove containment: "parent" and add margin as you said but now I need to put ul inside another element and somehow to put containment: "parent parent" to stick to other element not ul. — , Sep 12 '17 at 10:03
And answer was here: https://stackoverflow.com/questions/8084793/jquery-ui-how-to-set-draggable-containment-option-on-parents-parent — , Sep 12 '17 at 10:05
Elegant if it work :), i am with no error it sound good i guess. — , Sep 12 '17 at 10:07
I updated snippet and it works as I wanted but if u feel better u lead me to right path with those margins. Thanks anyway — , Sep 12 '17 at 10:12
welcome it was a suggest, good if you did by yourself ;) well done. — , Sep 12 '17 at 10:16

score 0 · Answer 1 · answered Sep 12 '17 at 09:54

0

when you drag from the little 'up down' arrow it works every time. Try editing the target or parent settings.

answered Sep 12 '17 at 09:54

Gee_63

76
1
8

It doesn't work try dragging one before last item to last item its same as with first and second. – Sep 12 '17 at 09:59

Jquery ui sortable doesn't sort on half-top-height drag

1 Answers1