Help with drag and drop tasks on scrolling page
-
Hi, I’ve integrated your amazing plugin in my WordPress page.
So I have created and loaded my custom css that fix some positioning problems in my page layout.This is my custom css that’s fix my layout issues:
.h5p-drag-droppable-words{width: 80%;} .h5p-drag-draggables-container{ width: 20%; position: absolute !important; top: 0; right: 0; } .h5p-drag-text .h5p-drag-draggable{ display: block !important; } .h5p-drag-text .h5p-drag-dropzone.h5p-drag-correct-feedback{ padding: 0.1em 1.65em 0.1em 0 !important; } .h5p-drag-draggable-wrong{ padding: 0.1em 1.65em 0.1em 0 !important; } div.h5p-drag-dropzone.ui-droppable{ padding: 0 !important; } .h5p-drag-text .h5p-drag-dropped{ margin: -3px 0 0 0 !important;}
If You do the task without scrolling the page there is no problems.
The problems come when you scroll the page down: in this case, when I select the draggable element, this looks far from mouse cursor. When release the mouse at any point, the draggable element moves to the top of the list but detached, and sometimes disappears upwards.
I believe it is necessary to modify this method and I tried but without success:
/** * Reverts the draggable to its' provided container. * @public * @params {jQuery} $container The parent which the draggable will revert to. */ Draggable.prototype.revertDraggableTo = function ($container) { // get the relative distance between draggable and container. var offLeft = this.$draggable.offset().left - $container.offset().left; var offTop = this.$draggable.offset().top - $container.offset().top; // Prepend draggable to new container, but keep the offset, // then animate to new container's top:0, left:0 this.$draggable.detach() .prependTo($container) .css({left: offLeft, top: offTop}) .animate({left: 0, top: 0}); };
In this screen you’ll see the result
The cursor is at the bottom of draggable element.In this screen draggable list problems after mouse release
It’s only positioning problem. I think that it’s not update the y position.
Help me, thank you very very much!!!
- The topic ‘Help with drag and drop tasks on scrolling page’ is closed to new replies.