JQuery Draggable with out jQuery UI

Developer
Chris Coyier
Size
2,216 Kb
Views
26,312
  1. JQuery Draggable with out jQuery UI Previews
  2. JQuery Draggable with out jQuery UI HTML Codes
  3. JQuery Draggable with out jQuery UI CSS Codes
  4. JQuery Draggable with out jQuery UI JS Codes

How do I make an jquery draggable with out jquery ui?

It doesn't have all the fancy callbacks and options, but hey, it makes things draggable.From: http://reader-download.googlecode.com/svn/trunk/jquery-draggable/index.html. What is a jquery draggable with out jquery ui? How do you make a jquery draggable with out jquery ui? This script and codes were developed by Chris Coyier on 30 September 2022, Friday.

JQuery Draggable with out jQuery UI Previews
IQ Test

JQuery Draggable with out jQuery UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Draggable with out jQuery UI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div>Drag me</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Draggable with out jQuery UI - Script Codes CSS Codes

div { width: 100px; height: 100px; line-height: 100px; text-align: center; background: red; color: white; position: absolute; left: 20px; top: 20px;
}
body {
}

JQuery Draggable with out jQuery UI - Script Codes JS Codes

(function($) { $.fn.drags = function(opt) { opt = $.extend({handle:"",cursor:"move"}, opt); if(opt.handle === "") { var $el = this; } else { var $el = this.find(opt.handle); } return $el.css('cursor', opt.cursor).on("mousedown", function(e) { if(opt.handle === "") { var $drag = $(this).addClass('draggable'); } else { var $drag = $(this).addClass('active-handle').parent().addClass('draggable'); } var z_idx = $drag.css('z-index'), drg_h = $drag.outerHeight(), drg_w = $drag.outerWidth(), pos_y = $drag.offset().top + drg_h - e.pageY, pos_x = $drag.offset().left + drg_w - e.pageX; $drag.css('z-index', 1000).parents().on("mousemove", function(e) { $('.draggable').offset({ top:e.pageY + pos_y - drg_h, left:e.pageX + pos_x - drg_w }).on("mouseup", function() { $(this).removeClass('draggable').css('z-index', z_idx); }); }); e.preventDefault(); // disable selection }).on("mouseup", function() { if(opt.handle === "") { $(this).removeClass('draggable'); } else { $(this).removeClass('active-handle').parent().removeClass('draggable'); } }); }
})(jQuery);
$('div').drags();
JQuery Draggable with out jQuery UI - Script Codes
JQuery Draggable with out jQuery UI - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded September 30, 2022
Rating 4.5
Size 2,216 Kb
Views 26,312
Do you need developer help for JQuery Draggable with out jQuery UI?

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!

Chris Coyier (chriscoyier) Script Codes
Name
Merging Flexbox Syntaxes
Simple jQuery Slideshow
CssPanelMenu
Three-Line Menu Icon, Various Techniques
Smooth Page Scrolling in jQuery
Scroll Drawing
Slide in from bottom boxes
Pull Quote from NY Post
A Pen by Chris Coyier
Automatic Table of Contents
Create amazing blog posts 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!