Enlace al vídeo: https://youtu.be/16OXCpw3MBs

Tengo uno extraño, tengo tres div, dos de los cuales se desplazan horizontal / verticalmente, todos los div tienen tarjetas que se pueden arrastrar para permitir el movimiento de tarjetas y ordenarlas. Todo funciona bien hasta que desplaza uno de los div para que las columnas estén "debajo" de otro div.

He adjuntado un video para tratar de mostrar esto, ya que no puedo pensar en una manera fácil de explicar el problema.

Aquí está el código de arrastrar y soltar:

 $(function () { $('ul.sort') .sortable({ containment: 'document', helper: 'clone', appendTo: "body", connectWith: ".sortable", stop: function (e, ui) { //Functions removed for security - some AJAX made here } }, }) .disableSelection(); });

Pensé que Z-Index lo ordenaría, pero el componente que se puede arrastrar se conecta con elementos que se pueden soltar debajo del elemento con el que quiero que se conecte.

Gracias por adelantado.

Enlace al vídeo: https://youtu.be/16OXCpw3MBs