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

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -