Draggable Window

Developer
Charlie Volpe
Size
2,717 Kb
Views
16,192
  1. Draggable Window Previews
  2. Draggable Window HTML Codes
  3. Draggable Window CSS Codes
  4. Draggable Window JS Codes

How do I make an draggable window?

I had an idea for using a draggable window and decided to test it here on CodePen. This should work on both mobile and desktop. I tested it on my GS3 and in Chrome.. What is a draggable window? How do you make a draggable window? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.

Draggable Window Previews
IQ Test

Draggable Window - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draggable Window</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="drag" class="window ui-widget-content"> <div class="button red"></div> <div class="button yellow"></div> <div class="button green"></div> <div class="content"> <div class="header"> Draggable Window </div> <p class="paragraph"> Twee beard Intelligentsia jean shorts, Marfa gastropub High Life. Cliche synth fanny pack, shabby chic artisan kitsch Brooklyn messenger bag Bushwick farm-to-table selfies. Bicycle rights jean shorts banjo Intelligentsia deep v, next level disrupt direct trade brunch artisan vinyl mixtape. Slow-carb Marfa lomo, Truffaut stumptown wolf meh paleo swag. Street art Vice church-key jean shorts 8-bit fanny pack put a bird on it roof party. Salvia beard cred kogi. Echo Park asymmetrical Tumblr Williamsburg gentrify, salvia trust fund skateboard keytar locavore tattooed plaid. </p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Draggable Window - Script Codes CSS Codes

body { background: #777;
}
.window { position: absolute; background: #e7e7e7; top: 10%; left: 10%; width: 50%; padding-top: 50%; border-radius: .5rem; cursor: pointer;
}
.button { position: absolute; top: 2%; width: 4.5%; padding-top: 4.5%; border-radius: 50%; box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(255,255,255,1), 0 -1px 0 rgba(0,0,0,.1);
}
.red { background: #ff6260; left: 2%;
}
.red:hover { background: #ff3737;
}
.yellow { background: #f6c26c; left: 8%;
}
.yellow:hover { background: #f3de3e;
}
.green { background: #a8dd86; left: 14%;
}
.green:hover { background: #81eb3d;
}
.content { position: absolute; background: #f7f7f7; top: 8%; left: 1%; right: 1%; bottom: 1%; border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; border: 1px solid #c7c7c7; padding: 1rem;
}
.header { position: relative; color: #474747; width: 100%; height: 2rem; line-height: 2rem; font-size: 2rem; text-align: center;
}
.paragraph { color: #474747; overflow: hidden; text-align: justify; width: 100%; height: 80%;
}
@media screen and (max-width: 38em) { html { font-size: 12px; }
}
@media screen and (max-width: 30em) { html { font-size: 8px; }
}

Draggable Window - Script Codes JS Codes

$(function(){ $('#drag').draggable();
});
Draggable Window - Script Codes
Draggable Window - Script Codes
Home Page Home
Developer Charlie Volpe
Username charlie-volpe
Uploaded November 08, 2022
Rating 3
Size 2,717 Kb
Views 16,192
Do you need developer help for Draggable Window?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Charlie Volpe (charlie-volpe) Script Codes
Name
Grided Canvas Side-Scroller Game Engine
Block Puzzle Game
RGBA Long Form to Decimal Converter
Podshare
Header Line Issue
Galaxy S3 CSS Template
Animated Menu Circles
Heart Shaped Games Redesign
Layout Resolutions
Full Site Redesign
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!