How to set jQuery draggable min max-left and min max-right

0 votes

I made a copy of JSbin for practice, JSbin link here, actual site link here.

This is just a practice for making the front-end of websites as I just started learning web dev little over a week ago. You can put in html, css and javascript in the editboxes, and a page spit out in Output just like the actual JSbin.

But the problem is that you can resize the divs pass other divs.

My idea to prevent this from happening is:
1. get the editboxes' current positions
2. store the left/right position of the editbox if resized to 10% window width
3. set the min/max left and right for the draggable div

And hence the question. How do I set the max-left/right for the draggable.

Also, any idea on why the draggable before Output div is diificult to drag to the right.

Edit: How the site is structured. When you drag the .drag (.resize in my JSbin code), it changes its left and right div's left and right. And the draggables are contained in the #main's div.

<div id="main>
  <div id="HTML"></div>
                
  <div class="drag"></div> //drag this left and right to change the right of the HTML and left of CSS
                     
  <div id="CSS"></div>
               
  <div class="drag"></div> //drag this left and right to change the right of the Css and left of JavaScript
                     
  <div id="JavaScript"></div>
                      
  <div class="drag"></div> //drag this left and right to change the right of the JavaScript and left of Output
                     
  <div id="Output"></div>
</div>

 

Jul 20, 2022 in Web Development by gaurav
• 23,260 points
511 views

1 answer to this question.

0 votes

How to set jQuery draggable min/max-left and min/max-right

  1. get the editboxes' current positions.
  2. store the left/right position of the editbox if resized to 10% window width.
  3. set the min/max left and right for the draggable div.
answered Jul 25, 2022 by rajatha
• 7,680 points

Related Questions In Web Development

0 votes
1 answer

How to set up authentication for reactjs and django ?

Hello  yahya , Using both, you can secure ...READ MORE

answered Jun 2, 2020 in Web Development by Niroj
• 82,880 points
1,566 views
0 votes
1 answer

how to add erroricon and custom validation message using jquery?

By default, the error message is put ...READ MORE

answered Jun 30, 2022 in Web Development by rajatha
• 7,680 points
4,296 views
0 votes
0 answers

How to preselect and disable specific checkboxes using js/jquery?

I have checkboxes with randomly generated ids ...READ MORE

Jul 26, 2022 in Web Development by gaurav
• 23,260 points
288 views
0 votes
0 answers

how to spin and stop wheel has custom position with jquery

this i my code. I am using this ...READ MORE

Jul 27, 2022 in Web Development by gaurav
• 23,260 points
1,440 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
1,095 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
14,810 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
22,757 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,880 points
3,083 views
0 votes
1 answer

How to set jQuery draggable min/max-left and min/max-right

How to set jQuery draggable min/max-left and ...READ MORE

answered Jul 25, 2022 in Web Development by rajatha
• 7,680 points
1,003 views
0 votes
1 answer

html5 video with jquery and inview - how to point to the right video element?

You can make use of this. For more ...READ MORE

answered Aug 5, 2022 in Web Development by rajatha
• 7,680 points
1,759 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP