Skip to content

Instantly share code, notes, and snippets.

@scopevale

scopevale/index.html

Created October 28, 2014 12:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save scopevale/c34682a5c80b17c84fd6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save scopevale/c34682a5c80b17c84fd6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
#container { width: 20em; height: 20em; border: 0.5em solid black; }
.draggable { width: 5em; height: 5em; border: 0.2em solid black; position: absolute; }
#one { background-color: #F55; }
#two { background-color: #5F5; }
</style>
</head>
<body>
<div id="container">
<div class="draggable" id="one">drag me</div>
<div class="draggable" id="two">drag me</div>
</div>
<script id="jsbin-javascript">
/*
* jQuery UI RefreshContainment v0.1
*
* Copyright 2010, Brian Peiris (http://brian.peiris.name)
* Licensed under a Creative Commons Attribution-ShareAlike 3.0 License
* (http://creativecommons.org/licenses/by-sa/3.0/)
*
* A plugin for jQuery UI's Draggable. It adds a refreshContainment method to
* every draggable which allows you to use the containment option on draggables
* with dynamically changing sizes.
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
* jquery.ui.mouse.js
* jquery.ui.draggable.js
*/
(function ($){
var $window = $(window);
// We need to know the location of the mouse so that we can use it to
// refresh the containment at any time.
$window.data("refreshContainment", {mousePosition: {pageX: 0, pageY: 0}});
$window.mousemove(function (event) {
$window.data("refreshContainment", {
mousePosition: {pageX: event.pageX, pageY: event.pageY}
});
});
// Extend draggable with the proxy pattern.
var proxied = $.fn.draggable;
$.fn.draggable = (function (method){
if (method === "refreshContainment") {
this.each(function (){
var inst = $(this).data("draggable");
// Check if the draggable is already being dragged.
var isDragging = inst.helper && inst.helper.is(".ui-draggable-dragging");
// We are going to use the existing _mouseStart method to take care of
// refreshing the containtment but, since we don't actually intend to
// emulate a true _mouseStart, we have to avoid any extraneous
// operations like the drag/drop manager and event triggering.
// So we save the original member values and replace them with dummies.
var ddmanager = $.ui.ddmanager;
$.ui.ddmanager = null;
var trigger = inst._trigger;
inst._trigger = function () { return true; }
var mousePosition = $window.data("refreshContainment").mousePosition;
var fakeEvent = {
pageX: mousePosition.pageX, pageY: mousePosition.pageY
};
inst._mouseStart(fakeEvent);
// Return those extraneous members back to the original values.
inst._trigger = trigger;
$.ui.ddmanager = ddmanager;
// Clear the drag, unless it was already being dragged.
if (!isDragging) {
inst._clear();
}
});
return this;
}
else {
// Delegate all other calls to the actual draggable implemenation.
return proxied.apply(this, arguments);
}
});
})(jQuery);
var draggables = $('.draggable');
draggables.draggable({containment: 'parent', stack: draggables});
var resizeDraggables = function (){
draggables.
each(function (){
var size = 5 + Math.random() * 5;
size = size.toString() + "em";
$(this).css({width: size, height: size});
}).
draggable("refreshContainment");
};
resizeDraggables();
setInterval(resizeDraggables, 2000);
</script>
<script id="jsbin-source-javascript" type="text/javascript">/*
* jQuery UI RefreshContainment v0.1
*
* Copyright 2010, Brian Peiris (http://brian.peiris.name)
* Licensed under a Creative Commons Attribution-ShareAlike 3.0 License
* (http://creativecommons.org/licenses/by-sa/3.0/)
*
* A plugin for jQuery UI's Draggable. It adds a refreshContainment method to
* every draggable which allows you to use the containment option on draggables
* with dynamically changing sizes.
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
* jquery.ui.mouse.js
* jquery.ui.draggable.js
*/
(function ($){
var $window = $(window);
// We need to know the location of the mouse so that we can use it to
// refresh the containment at any time.
$window.data("refreshContainment", {mousePosition: {pageX: 0, pageY: 0}});
$window.mousemove(function (event) {
$window.data("refreshContainment", {
mousePosition: {pageX: event.pageX, pageY: event.pageY}
});
});
// Extend draggable with the proxy pattern.
var proxied = $.fn.draggable;
$.fn.draggable = (function (method){
if (method === "refreshContainment") {
this.each(function (){
var inst = $(this).data("draggable");
// Check if the draggable is already being dragged.
var isDragging = inst.helper && inst.helper.is(".ui-draggable-dragging");
// We are going to use the existing _mouseStart method to take care of
// refreshing the containtment but, since we don't actually intend to
// emulate a true _mouseStart, we have to avoid any extraneous
// operations like the drag/drop manager and event triggering.
// So we save the original member values and replace them with dummies.
var ddmanager = $.ui.ddmanager;
$.ui.ddmanager = null;
var trigger = inst._trigger;
inst._trigger = function () { return true; }
var mousePosition = $window.data("refreshContainment").mousePosition;
var fakeEvent = {
pageX: mousePosition.pageX, pageY: mousePosition.pageY
};
inst._mouseStart(fakeEvent);
// Return those extraneous members back to the original values.
inst._trigger = trigger;
$.ui.ddmanager = ddmanager;
// Clear the drag, unless it was already being dragged.
if (!isDragging) {
inst._clear();
}
});
return this;
}
else {
// Delegate all other calls to the actual draggable implemenation.
return proxied.apply(this, arguments);
}
});
})(jQuery);
var draggables = $('.draggable');
draggables.draggable({containment: 'parent', stack: draggables});
var resizeDraggables = function (){
draggables.
each(function (){
var size = 5 + Math.random() * 5;
size = size.toString() + "em";
$(this).css({width: size, height: size});
}).
draggable("refreshContainment");
};
resizeDraggables();
setInterval(resizeDraggables, 2000);
</script></body>
</html>
Raw
jsbin.rojuvo.js
/*
* jQuery UI RefreshContainment v0.1
*
* Copyright 2010, Brian Peiris (http://brian.peiris.name)
* Licensed under a Creative Commons Attribution-ShareAlike 3.0 License
* (http://creativecommons.org/licenses/by-sa/3.0/)
*
* A plugin for jQuery UI's Draggable. It adds a refreshContainment method to
* every draggable which allows you to use the containment option on draggables
* with dynamically changing sizes.
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
* jquery.ui.mouse.js
* jquery.ui.draggable.js
*/
(function ($){
var $window = $(window);
// We need to know the location of the mouse so that we can use it to
// refresh the containment at any time.
$window.data("refreshContainment", {mousePosition: {pageX: 0, pageY: 0}});
$window.mousemove(function (event) {
$window.data("refreshContainment", {
mousePosition: {pageX: event.pageX, pageY: event.pageY}
});
});
// Extend draggable with the proxy pattern.
var proxied = $.fn.draggable;
$.fn.draggable = (function (method){
if (method === "refreshContainment") {
this.each(function (){
var inst = $(this).data("draggable");
// Check if the draggable is already being dragged.
var isDragging = inst.helper && inst.helper.is(".ui-draggable-dragging");
// We are going to use the existing _mouseStart method to take care of
// refreshing the containtment but, since we don't actually intend to
// emulate a true _mouseStart, we have to avoid any extraneous
// operations like the drag/drop manager and event triggering.
// So we save the original member values and replace them with dummies.
var ddmanager = $.ui.ddmanager;
$.ui.ddmanager = null;
var trigger = inst._trigger;
inst._trigger = function () { return true; }
var mousePosition = $window.data("refreshContainment").mousePosition;
var fakeEvent = {
pageX: mousePosition.pageX, pageY: mousePosition.pageY
};
inst._mouseStart(fakeEvent);
// Return those extraneous members back to the original values.
inst._trigger = trigger;
$.ui.ddmanager = ddmanager;
// Clear the drag, unless it was already being dragged.
if (!isDragging) {
inst._clear();
}
});
return this;
}
else {
// Delegate all other calls to the actual draggable implemenation.
return proxied.apply(this, arguments);
}
});
})(jQuery);
var draggables = $('.draggable');
draggables.draggable({containment: 'parent', stack: draggables});
var resizeDraggables = function (){
draggables.
each(function (){
var size = 5 + Math.random() * 5;
size = size.toString() + "em";
$(this).css({width: size, height: size});
}).
draggable("refreshContainment");
};
resizeDraggables();
setInterval(resizeDraggables, 2000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment