javascript - scroll inside of a doppable DIV while dragging near of the bottom -
I have more than one draggable device inside the scrollable device, when I drag them into a droppable zone (Which is also a scrollable Dave), the doppable DIV does not scroll down. Just to say how the page is running, should you just scroll while pulling a dragable divan?
My current jquery code for creating a divace draggable
$ ("drag_item"). Dragable ({helper: 'clone', scroll: true, drag: function (event, UI) {$ (this) .css ('z-index', '100');}});
I came up with this solution:
var direction = {}; Var bound = {}; Var scrolling = falls; Var Container = document.getElementById ("Container"); $ ('# Table-container') .on ('dragstart', draggable, function (event, UI) {bound = {right: $ (container) .offet (). Left + $ (container) .Wide () - 50, left: $ (container) .offet (). Left + 50, top: $ (container) .offet (). Top + 50, below: $ (container) .offet (). Top + $ (container) height () - 50};}). ('Draggable', draggable, function (event, UI) {direction = {};}) .on ('drag', draggable, function (event, ui) {direction.right = event.clientX - bound.right; direction .left = bound.left - event.clientX; direction.up = bound.top - event.clientY; direction.down = event.clientY- bound.bottom; if ((direction .right> gt; direction.left & gt; 0] direction.up> 0] direction.down> 0) & amp; amp;; scrolling) {scroll (); scrolling = true;} else {scrolling = false;}}); Function Scroll () {if (direction.right> 0) {tableContainer.scrollLeft = tableContainer.scrollLeft + (direction.right> gt;> 1); // to soften with effect is divided by 2} if (direction.left & gt; 0) {tableContainer.scrollLeft = tableContainer.scrollLeft - (direction.left> gt;> 1); } If (direction.down> 0) {tableContainer.scrollTop = tableContainer.scrollTop + (direction.down>> gt; 1); } If (direction.up> 0) {tableContainer.scrollTop = tableContainer.scrollTop - (direction.up>> gt; 1); } If (direction.right> gt; direction.left & gt; 0] direction.up> 0] direction.down> 0} {setTimeout (scroll, 100); }}
Comments
Post a Comment