scroll - jQuery Draggable - Scrolling containers other than its own with -
so have unordered list of draggables want drag unordered list of droppables. if clone draggable , append "body", can drag out of container , drop on droppable elements in other list, not automatically scroll through droppable unordered list. if clone , append other unordered list, automatically scroll droppable list, element not visible when dragging until hovering on droppable list. know of workaround or better approach problem?
fiddle code here: https://jsfiddle.net/bkfxjnom/6/ draggable code:
$('.draggable').draggable({ helper: 'clone', appendto: "body", zindex: 100, refreshpositions: true, revert: 'invalid', start: function(event, ui) { $(this).css('visibility', 'hidden'); }, stop: function(event, ui) { $(this).css('visibility', 'visible'); } });
droppable list html:
<ul class="list-group" id="root" style="overflow-y:scroll; height: 150px"> <li class="list-group-item category-droppable" id="level1"> <span class="glyphicon glyphicon-chevron-right"></span>firstlvl <ul class="list-group" id="level1"> <li class="list-group-item category-droppable" id="level2"> <span class="glyphicon glyphicon-chevron-right"></span>secondlvl <ul class="list-group" id="level2"> <li class="list-group-item category-droppable" name="a" id="level3">a</li>+++ many li elements </ul> </li> </ul> </li> </ul>
thanks in advance!
so workaround ended using append clone container wanted scrollable, containing there. made clone offset on drag mouse, of positioned absolutely. sort of hacky solution, works.
$('.draggable').draggable({ scrollsensitivity: 35, scrollspeed: 28, containment: "#root", helper: "clone", appendto: "#root", zindex: 5000, refreshpositions: true, start: function (event, ui) { parent = $(this); $(this).css('visibility', 'hidden'); $(ui.helper).css('visibility', 'hidden'); clone = $(this).clone(); clone.addclass("ui-draggable-dragging"); clone.css('visibility', 'visible'); clone.css("position", "absolute"); clone.css("z-index", 5001); clone.prependto($(".dragging-area")); $("#unprocessed_list").droppable("disable"); }, stop: function (event, ui) { clone.animate($(this).offset(), 500); settimeout(function () { clone.remove(); parent.css('visibility', 'visible'); }, 500); $("#unprocessed_list").droppable("enable"); }, drag: function (event, ui) { clone.offset({ top: event.pagey - clone.height(), left: event.pagex - clone.width()/2 }); } });
Comments
Post a Comment