Within a scrollable div, I have multiple draggable divs. However, when I drag them into another scrollable div (the droppable zone), only the page scrolls and not the droppable div itself. How can I make it so that only the droppable div scrolls while dragging?
Below is my current jQuery code for making the divs draggable:
$(".drag_item").draggable({
helper: 'clone',
scroll: true,
drag: function( event, ui ) {
$(this).css('z-index','100');
}
});
Here is the solution I developed:
let movement = {};
let boundary = {};
let scrollingActive = false;
let mainContainer = document.getElementById("main-container");
$('#data-table')
.on('dragstart', dragHandler, function(event, ui) {
boundary = {
right: $(mainContainer).offset().left + $(mainContainer).width() - 50,
left: $(mainContainer).offset().left + 50,
top: $(mainContainer).offset().top + 50,
bottom: $(mainContainer).offset().top + $(mainContainer).height() - 50
};
})
.on('dragstop', dragHandler, function(event, ui) {
movement = {};
})
.on('drag', dragHandler, function(event, ui) {
movement.right = event.clientX - boundary.right;
movement.left = boundary.left - event.clientX;
movement.up = boundary.top - event.clientY;
movement.down = event.clientY - boundary.bottom;
if ((movement.right > 0 || movement.left > 0|| movement.up > 0 || movement.down > 0) && !scrollingActive) {
initiateScroll();
scrollingActive = true;
} else {
scrollingActive = false;
}
});
function initiateScroll() {
if (movement.right > 0) {
mainContainer.scrollLeft = mainContainer.scrollLeft + (movement.right >> 1);
}
if (movement.left > 0) {
mainContainer.scrollLeft = mainContainer.scrollLeft - (movement.left >> 1);
}
if (movement.down > 0) {
mainContainer.scrollTop = mainContainer.scrollTop + (movement.down >> 1);
}
if (movement.up > 0) {
mainContainer.scrollTop = mainContainer.scrollTop - (movement.up >> 1);
}
if (movement.right > 0 || movement.left > 0 || movement.up > 0 || movement.down > 0) {
setTimeout(initiateScroll, 100);
}
}
To resolve the scrolling issue, try using the CSS property "overflow=auto". It worked perfectly for me.
<div style="overflow:auto;"></div>
If you prefer using jQuery, the latest version now includes support for using scrollTop as an animation variable.
$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});
You can now smoothly scroll without having to rely on setTimeout or setInterval functions.
I am working on creating input fields inside an HTML table using Vue.js. On click of a button, I want to perform some calculations based on the input values. However, it seems that the calculations are not happening as desired. What I have attempted so fa ...
Could anyone please help me with setting the OTP expire time in Next.js using Firebase? I have searched through the Firebase documentation but haven't been able to find a solution to my issue. Below is the code I am using to send the OTP: const appV ...
I am currently working on a project that involves creating a div element for the purpose of dragging and dropping files. My goal is to have the height of the div increase when a file is dragged into it, and decrease when the file is dragged out. To achiev ...
Is there a way to make IE 10 display a pointer instead of an I-bar when selecting from a list? Despite trying various methods found in similar questions, I have been unable to resolve this issue. The cursor: pointer property works as expected on other br ...
When attempting to replace a node value with HTML content, I encountered an issue where the HTML tags were being displayed on the HTML page instead of applying the intended style. <style> .YellowSelection { background: yellow; } < ...
I have been working on storing images in a MongoDB database and trying to display the response I receive from an Express API as an image on the client side. The image source URL looks like this: src="/image/data/5a44dde172aa021d107e7d33" When I try to wr ...
Here is the MongoDB Native Driver query being used: mo.post.find({_us:_us, utc:{$lte:utc}},{ fields:{geo:0, bin:0, flg:0, mod:0, edt:0}, hint:{_us:1, utc:-1}, sort:{utc:-1}, limit:X, explain:true }).toArray(function(err, result){ ...
Currently, I am utilizing the jquery fileupload plugin to facilitate the process of uploading a file and then using the data from said file to populate a fuelux treeview. I have configured an ajax call for handling the file data where the information is fe ...
As a newcomer to Angular, I'm working on a modal component that changes from hiding to showing when a button with (click) is clicked. The goal is to integrate this modal into my main component, allowing me to display the modal on top of the main conte ...
Here is the code I am currently running: function TypeOfCar(vehicle) { this.vehicle = vehicle; } var sedan = new TypeOfCar('sedan'); var carType = race; console.log(carType); console.log(sedan); After running the code, the output is as follo ...
I am currently utilizing version 33 of material-ui-next: import * as mui from 'material-ui'; Within a component, I have an AppBar featuring a ToolBar and a Select: render() { return ( <mui.AppBar color="secondary"> <mui.To ...
Currently utilizing node-binance-api for trading purposes. I have initiated an order by executing the following lines of code: let adjustLeverage = await binance.futuresLeverage(coin, 2); let res_2 = await binance.futuresMarketSell(coin, quantity); . Subs ...
Trying my hand at creating a react-native component using Typescript for the first time, but I ran into an issue on line 51: Property 'propTypes' does not exist on type 'typeof TextInput Couldn't find any helpful information on similar ...
How can data be effectively stored in a JSON-like structure? I have noticed two different approaches to storing data within a json object, each with its own method for accessing the data (illustrated using examples in Python): Approach 1: obj1 = [ {" ...
I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...
After checking similar questions on stackoverflow without success, I am seeking a solution. I am attempting to determine if a subroute is a child of a specific route in order to display a container. Unfortunately, the following code snippet does not work: ...
I'm currently in the process of developing a website that includes a navbar with a navbar-fixed-top class. Everything seems to be working perfectly except for when I zoom in. On mobile devices, when I zoom in, the navbar starts wrapping and goes to th ...
Currently developing a Silverlight video player, I stumbled upon the JW Player for inspiration. I know that Silverlight apps are typically contained within .xap files, but JW Player utilizes JavaScript scripts to implement Silverlight logic. Can you plea ...
Currently, as I work on developing a website with Joomla, I have incorporated a jQuery module that adjusts the opacity of the enclosing div upon hovering over it. Unfortunately, this also affects the text within the div and gives it a less desirable appear ...
When I have multiple divs grouped together inside another div, the placement of my h1 tag shifts downwards. How can I prevent this from happening and ensure that the text is added without any unwanted shifting? This issue only occurs when there are two o ...