jQuery draggable and sortable not working as expected

Question

The setup has a few issues which I'm trying to solve, been at it for a while now. Basically, I've made it sortable so you can move items to another folder. But as you might not have every folder open (not shown in jsfiddle) it is setup to use a hover class, but when dragging a file and it starts sorting, the hover class still sometimes shows even though I'm not hovering over a folder...

Also after sorting a file, trying to drag it around again makes it glitch up and makes it so you cant really move it again for some reason.

https://jsfiddle.net/4Lz5Lfsj/12/

HTML:

<main>
  <div id="menu">
    <ul id="menuul">
      <li class="folder">Folder</li>
      <li class="folder">Folder</li>
      <li class="folder">Folder</li>
      <ul>
        <li class="clippet">File</li>
        <li class="clippet">File</li>
      </ul>

      <li class="clippet">File</li>
      <li class="clippet">File</li>
      <li class="clippet">File</li>
      <li class="clippet">File</li>
    </ul>
  </div>
</main>

CSS:

main
{
  display: inline-block;
  border: 1px solid black;
  padding-right: 12px;
}

#menu ul li
{
  display: flex;
}

#menu ul li p
{
  display: inline-block;
  margin: 0;
  margin-left: 8px;
}

.draggableHover
{
  background-color: grey;
}

JS:

$(".clippet").draggable({
    revert: "invalid",
    scroll: false,
    delay: 300,
    cursorAt: { left: -5 },
    cursor: 'move',
    connectToSortable: '#menuul'
  });

  $(".folder").droppable({
    accept: ".clippet",
    hoverClass: 'draggableHover'
  });

  $("#menuul").sortable(
  {
    revert: true,
    handle: 'p'
  });

Jose Rojas · Accepted Answer · 2018-01-17 17:46:20Z

1

You can achieve it by changing the class to those folders are not allowed to drop files, to emulate sub-levels within of folders as your code, every folder should have own ul and append the file when this is dropped into the folder.

over and out function could help you to highlight the folder which are allowed to drop files.

Here the idea working:

https://jsfiddle.net/4Lz5Lfsj/17

edited Jan 17, 2018 at 17:46

answered Jan 17, 2018 at 15:10

Jose Rojas

3,5403 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Erdss4 Over a year ago

Yes but what about when you drag them in between folders, sometimes the red will stay shown, even though you are not directly hovering on the folder, if you get me? And after you place a sortable file, then go to drag it again it still does not allow you to drag it around past the parent, as it did before when you first load the page?

Jose Rojas Over a year ago

@Erdss4 the ul inside of ul.menuu1 is to emulate the files inside of that folder?

Erdss4 Over a year ago

Yes each inner ul is to emulate inside of a folder. I wanted to be able to move a file and use .sortable() to make it possible to move a file in between a folder and when dropped would put it back at root level, but sometimes when you move the file between folders, the hover class stays on even though you are not directly over a folder, if that makes sense?

Jose Rojas Over a year ago

@Erdss4 here an idea to highlight the folder with over,out and drop functions. work in a better way jsfiddle.net/4Lz5Lfsj/15

Jose Rojas Over a year ago

@Erdss4 emulating the idea of folders inside a folder, here a workaround how can you achieve this. jsfiddle.net/4Lz5Lfsj/17

Collectives™ on Stack Overflow

jQuery draggable and sortable not working as expected

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related