JQuery draggable + Sortable issue with container relative

0
votes

I need to ha a simple list of elements that can be dragged to a sortable div. Very simple stuff. But my div that contains the sortable elements is position:relative and need to stay like that. This create an issue that you can see here : http://jsfiddle.net/yynqweuj/1/

<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable" style="position:relative;">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

If your start to drag the "drag me down" element a red square appears as an helper and is centered on the cursor, if you enter the element into the sortable it's still OK, but when you leave the sortable zone the red square moves. This is because the container is with position relative and also because of an update from JQuery UI (I think).

I tried with older versions like 1.10.2 and there is no problem, because the helper is always append to the body but now with the last stable version 1.11.2 it's append to the body but when you enter the sortable zone it's append to the sortable list... And has it's in position relative, the math to calculate the position is wrong...

Any ideas ?

Thanks !

2
jqueryjquery-uidraggablejquery-ui-sortable
This seems to happen only for new elements, in case you start to drag an already placed element it stays centered to cursor. – axel.michel
Yes the problem is not on the sortable part, only the draggable that enter and leave the sortable... – Mushr00m

2 Answers

1
votes

In my case, I was putting the elements inside Bootstrap .col-ms-x. The fix was to add the appendTo and the clone options, as follows:

$('#sortable').sortable({
    helper: 'clone',
    appendTo: document.body,
});
0
votes

First of all, you're appending a <div> to a <ul> which is invalid. You should append an <li> instead. If you're trying to add a centered square icon in between the items, you can achieve it using a centered css psuedo element as shown below:

$(function() {
  $("#sortable").sortable({
    revert: true
  });
  $("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: function() {
      var $helper = $('<li/>', {
        id: 'effect-draghelper'
      });
      return $helper;
    },
    revert: "invalid"
  });
  $("ul, li").disableSelection();
});
#sortable {
  position: relative;
}
ul {
  text-align: center;
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
  list-style-type: none;
}
li {
  width: 150px;
  margin: 5px;
  padding: 5px;
}
#effect-draghelper::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<p>zklzejrkzer jzerj klzejrlkjzerzjre jzeklr klzejrl zjlkerj lzjelrk jzjerkl zlkerj lkzjelrj lzjr l jzelkjr kzer zlerjlk zer z jerkl zklerkj zlrj zelkr klzr zkler jklzelkr jlkz j rlkzejlkr lkzej r jklze r jzlre kjz r klzej</p>