Draggable div without jQuery UI
Here's a really simple example that might get you started:
$(document).ready(function() { var $dragging = null; $(document.body).on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY, left: e.pageX }); } }); $(document.body).on("mousedown", "div", function (e) { $dragging = $(e.target); }); $(document.body).on("mouseup", function (e) { $dragging = null; });});Example: http://jsfiddle.net/Jge9z/
I understand that I shall use the mouse position relative to the container div (in which the div shall be dragged) and that I shall set the divs offset relative to those values.
Not so sure about that. It seems to me that in drag and drop you'd always want to use the offset of the elements relative to the document.
If you mean you want to constrain the dragging to a particular area, that's a more complicated issue (but still doable).
Here's another updated code:
$(document).ready(function() { var $dragging = null; $('body').on("mousedown", "div", function(e) { $(this).attr('unselectable', 'on').addClass('draggable'); var el_w = $('.draggable').outerWidth(), el_h = $('.draggable').outerHeight(); $('body').on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY - el_h / 2, left: e.pageX - el_w / 2 }); } }); $dragging = $(e.target); }).on("mouseup", ".draggable", function(e) { $dragging = null; $(this).removeAttr('unselectable').removeClass('draggable'); });});Demo: http://jsfiddle.net/tovic/Jge9z/31/
I've created a simple plugin to this thread.
// Simple JQuery Draggable Plugin// https://plus.google.com/108949996304093815163/about// Usage: $(selector).drags();// Options:// handle => your dragging handle.// If not defined, then the whole body of the// selected element will be draggable// cursor => define your draggable element cursor type// draggableClass => define the draggable class// activeHandleClass => define the active handle class//// Update: 26 February 2013// 1. Move the `z-index` manipulation from the plugin to CSS declaration// 2. Fix the laggy effect, because at the first time I made this plugin,// I just use the `draggable` class that's added to the element// when the element is clicked to select the current draggable element. (Sorry about my bad English!)// 3. Move the `draggable` and `active-handle` class as a part of the plugin option// Next update?? NEVER!!! Should create a similar plugin that is not called `simple`!(function($) { $.fn.drags = function(opt) { opt = $.extend({ handle: "", cursor: "move", draggableClass: "draggable", activeHandleClass: "active-handle" }, opt); var $selected = null; var $elements = (opt.handle === "") ? this : this.find(opt.handle); $elements.css('cursor', opt.cursor).on("mousedown", function(e) { if(opt.handle === "") { $selected = $(this); $selected.addClass(opt.draggableClass); } else { $selected = $(this).parent(); $selected.addClass(opt.draggableClass).find(opt.handle).addClass(opt.activeHandleClass); } var drg_h = $selected.outerHeight(), drg_w = $selected.outerWidth(), pos_y = $selected.offset().top + drg_h - e.pageY, pos_x = $selected.offset().left + drg_w - e.pageX; $(document).on("mousemove", function(e) { $selected.offset({ top: e.pageY + pos_y - drg_h, left: e.pageX + pos_x - drg_w }); }).on("mouseup", function() { $(this).off("mousemove"); // Unbind events from document if ($selected !== null) { $selected.removeClass(opt.draggableClass); $selected = null; } }); e.preventDefault(); // disable selection }).on("mouseup", function() { if(opt.handle === "") { $selected.removeClass(opt.draggableClass); } else { $selected.removeClass(opt.draggableClass) .find(opt.handle).removeClass(opt.activeHandleClass); } $selected = null; }); return this; };})(jQuery);Demo: http://tovic.github.io/dte-project/jquery-draggable/index.html
Here's my contribution:
http://jsfiddle.net/g6m5t8co/1/
<!doctype html><html> <head> <style> #container { position:absolute; background-color: blue; } #elem{ position: absolute; background-color: green; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } </style> <script> var mydragg = function(){ return { move : function(divid,xpos,ypos){ divid.style.left = xpos + 'px'; divid.style.top = ypos + 'px'; }, startMoving : function(divid,container,evt){ evt = evt || window.event; var posX = evt.clientX, posY = evt.clientY, divTop = divid.style.top, divLeft = divid.style.left, eWi = parseInt(divid.style.width), eHe = parseInt(divid.style.height), cWi = parseInt(document.getElementById(container).style.width), cHe = parseInt(document.getElementById(container).style.height); document.getElementById(container).style.cursor='move'; divTop = divTop.replace('px',''); divLeft = divLeft.replace('px',''); var diffX = posX - divLeft, diffY = posY - divTop; document.onmousemove = function(evt){ evt = evt || window.event; var posX = evt.clientX, posY = evt.clientY, aX = posX - diffX, aY = posY - diffY; if (aX < 0) aX = 0; if (aY < 0) aY = 0; if (aX + eWi > cWi) aX = cWi - eWi; if (aY + eHe > cHe) aY = cHe -eHe; mydragg.move(divid,aX,aY); } }, stopMoving : function(container){ var a = document.createElement('script'); document.getElementById(container).style.cursor='default'; document.onmousemove = function(){} }, } }(); </script> </head> <body> <div id='container' style="width: 600px;height: 400px;top:50px;left:50px;"> <div id="elem" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 200px;height: 100px;"> <div style='width:100%;height:100%;padding:10px'> <select id=test> <option value=1>first <option value=2>second </select> <INPUT TYPE=text value="123"> </div> </div> </div> </body></html>