javascript - How to use draggable on overflow:scroll containers? -
i have item want drag container, after scroll first item stays down mouse while dragging , first container resets top.
edit. updated jsfiddle
html:
<body> <div id=left> <div id=item>drag me!</div> </div> <div id=right></div> </body>
css:
#left{ position:absolute; top:0; bottom:0; left:0; right:50%; background-color:red; overflow-y:scroll; } #right{ position:absolute; top:0; bottom:0; left:50%; right:0; background-color:green; } #item{ position:static; top:150px; height:50px; width:50px; background-color:black; color:white; }
javascript:
$("#left #item").draggable({ revert: true, stack:"#right", start: function() { $(this).parent().css('overflow-y', 'visible'); }, stop: function() { $(this).parent().css('overflow-y', 'scroll'); } //helper:"clone" }); $("#right").droppable({ tolerance:"pointer", drop: function(event, ui) { $(".tmp").remove(); $("<div>").appendto(this) .addclass("new") .css("background-color","blue") .css("height","20px"); }, over: function(event, ui) { $("<div>").appendto(this) .addclass("tmp") .css("border","2px dashed black") .css("height","20px"); }, out: function(event, ui) { $(".tmp").remove(); } });
i did best resume code reproduce bug since large project, hope way can me.
Comments
Post a Comment