Skip to content

Instantly share code, notes, and snippets.

Created September 8, 2014 12:54
Show Gist options
  • Select an option

  • Save anonymous/ef64060dc2d80e8da2b4 to your computer and use it in GitHub Desktop.

Select an option

Save anonymous/ef64060dc2d80e8da2b4 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
</head>
<body>
<script id="jsbin-javascript">
// Draggable Plugin
$.fn.draggable = function(e) {
var t = this;
var n = {
handle: "",
cursor: "move",
axis: null,
containParent: false
};
e = $.extend(n, e);
if (e.handle === "") {
var r = t
} else {
var r = t.find(e.handle)
}
return r.css("cursor", e.cursor).on("mousedown", function(t) {
if (e.handle === "") {
var n = $(this).addClass("draggable")
} else {
var n = $(this).addClass("active-handle").parent().addClass("draggable")
}
var i = n.css("z-index"),
s = n.outerHeight(),
o = n.outerWidth(),
u = n.offset().top + s - t.pageY,
a = n.offset().left + o - t.pageX;
var f = $(this).parent();
var l = f.width(),
c = f.height();
var h = parseInt(f.offset().left) + parseInt(f.css("padding-left").replace("px", "")),
p = h + l,
d = parseInt(f.offset().top) + parseInt(f.css("padding-top").replace("px", "")),
v = d + c;
n.css("z-index", 1e3).parents().on("mousemove", function(t) {
var f = t.pageY + u - s,
l = t.pageX + a - o,
c = null;
if (e.containParent === true) {
if (l < h) l = h;
if (l > p - o) l = p - o;
if (f < d) f = d;
if (f > v - s) f = v - s
}
if (e.axis == "x") {
c = {
left: l
}
} else if (e.axis == "y") {
c = {
top: f
}
} else {
c = {
left: l,
top: f
}
}
$(".draggable").offset(c);
$(".draggable, html").on("mouseup", function() {
n.parents().off("mousemove");
$(r).removeClass("draggable").css("z-index", i)
})
});
t.preventDefault()
}).on("mouseup", function() {
if (e.handle === "") {
$(this).removeClass("draggable")
} else {
$(this).removeClass("active-handle").parent().removeClass("draggable")
}
r.off("mousedown", function(e) {
e.preventDefault()
})
})
}
var repulseTop = function(bindings, heights) {
var lowerCoords = _.reduceRight(bindings, function(lowerCoords, binding, index) {
if (!lowerCoords.length) {
lowerCoords.unshift(binding);
} else {
lowerCoords.unshift(_.first(lowerCoords) - heights[index]);
}
return lowerCoords;
}, []);
var coords = _.reduce(lowerCoords, function(coords, lowerCoord, index) {
var offset;
if (!coords.length) {
offset = bindings[index] - lowerCoord;
coords.push(offset > 0 ? lowerCoord : bindings[index]);
} else if (index === (bindings.length - 1)) {
coords.push(lowerCoord);
} else {
offset = _.last(coords) + heights[index - 1] - lowerCoord;
if (offset === 0) {
coords.push(lowerCoord);
} else {
if (bindings[index] - lowerCoord > 0) {
coords.push(lowerCoord);
} else {
offset = Math.max(offset, bindings[index] - lowerCoord);
coords.push(lowerCoord + offset);
}
}
}
return coords;
}, []);
return coords;
};
var repulseBottom = function(bindings, heights) {
return _.reduce(bindings, function(coords, binding, index) {
if (!coords.length) {
coords.push(binding);
} else {
var maxPossibleOffset = _.last(coords) + heights[index - 1] - binding;
console.log(maxPossibleOffset)
maxPossibleOffset = maxPossibleOffset < 0 ? 0 : maxPossibleOffset;
coords.push(maxPossibleOffset + binding);
}
return coords;
}, []);
};
var repulse = function(bindings, heights, frozenElementIndex) {
console.log(bindings)
var topBindings = bindings.slice(0, frozenElementIndex + 1);
var topHeights = heights.slice(0, frozenElementIndex + 1);
var bottomBindings = bindings.slice(frozenElementIndex);
var bottomHeights = heights.slice(frozenElementIndex);
var topCoords = repulseTop(topBindings, topHeights);
var bottomCoords = repulseBottom(bottomBindings, bottomHeights);
console.log('TOP ' + topCoords);
console.log('BOTTOM ' + bottomCoords);
return topCoords.concat(bottomCoords.slice(1));
};
console.clear();
$(function() {
var start = -1000;
var end = 2600;
var oldCoords = [196, 350, 908, 1252, 2462];
var bindings = [178, 332, 354, 1234, 1718];
var heights = [93, 978, 348, (94), 108];
//[178, 526, 649, 1234, 2444]
// [178, 526, 1084, 1234, 2444]
var frozenIndex = 2;
var render = function() {
var coords = repulse(bindings, heights, frozenIndex);
$('body').empty();
// ruller
for (var i = start; i < end; i += 20) {
$('<div/>').css({
position: 'absolute',
left: 0,
top: -start + i + 'px',
width: i % 100 === 0 ? 60 : 40,
'color': i % 100 === 0 ? '#333' : '#aaa',
'border-top': (i % 100 === 0 ? '2px solid #333' : '1px solid #777')
})
.text(i)
.appendTo('body');
}
// bindings
bindings.forEach(function(b) {
$('<div/>').css({
position: 'absolute',
left: 130,
top: -start + b + 'px',
'color': '#f00',
'font-weight': 'bold',
width: 400,
'border-top': '1px solid #f00'
})
.text(b)
.appendTo('body');
});
// oldCoords
oldCoords.forEach(function(c) {
$('<div/>').css({
position: 'absolute',
left: 130,
top: -start + c + 'px',
'text-align': 'right',
'color': '#333',
'font-weight': 'bold',
width: 400,
'border-top': '1px solid #333'
})
.text(c)
.appendTo('body');
});
// coords
coords.forEach(function(c, ix) {
$('<div/>').css({
position: 'absolute',
left: 160 + (ix * 60),
top: -start + c + 'px',
'font-weight': 'bold',
height: heights[ix],
'box-shadow': '7px 7px 5px 0px rgba(50, 50, 50, 0.75)',
'background-color': (ix % 2 ? 'red' : 'green'),
'font-size': '14px'
})
.data('id', ix)
.draggable({
axis: 'y'
})
.one('mouseup', function() {
var $this = $(this);
var top = parseInt($this.css('top').replace('px', ''), 10);
var index = $this.data('id');
bindings[index] = top - - start;
frozenIndex = index;
render();
})
.html('b: ' + bindings[ix] + '<br/>h: ' + heights[ix] + '<br/>c: ' + c + '<br/> bot: ' + (c + heights[ix]))
.appendTo('body');
});
};
render();
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Draggable Plugin
$.fn.draggable = function(e) {
var t = this;
var n = {
handle: "",
cursor: "move",
axis: null,
containParent: false
};
e = $.extend(n, e);
if (e.handle === "") {
var r = t
} else {
var r = t.find(e.handle)
}
return r.css("cursor", e.cursor).on("mousedown", function(t) {
if (e.handle === "") {
var n = $(this).addClass("draggable")
} else {
var n = $(this).addClass("active-handle").parent().addClass("draggable")
}
var i = n.css("z-index"),
s = n.outerHeight(),
o = n.outerWidth(),
u = n.offset().top + s - t.pageY,
a = n.offset().left + o - t.pageX;
var f = $(this).parent();
var l = f.width(),
c = f.height();
var h = parseInt(f.offset().left) + parseInt(f.css("padding-left").replace("px", "")),
p = h + l,
d = parseInt(f.offset().top) + parseInt(f.css("padding-top").replace("px", "")),
v = d + c;
n.css("z-index", 1e3).parents().on("mousemove", function(t) {
var f = t.pageY + u - s,
l = t.pageX + a - o,
c = null;
if (e.containParent === true) {
if (l < h) l = h;
if (l > p - o) l = p - o;
if (f < d) f = d;
if (f > v - s) f = v - s
}
if (e.axis == "x") {
c = {
left: l
}
} else if (e.axis == "y") {
c = {
top: f
}
} else {
c = {
left: l,
top: f
}
}
$(".draggable").offset(c);
$(".draggable, html").on("mouseup", function() {
n.parents().off("mousemove");
$(r).removeClass("draggable").css("z-index", i)
})
});
t.preventDefault()
}).on("mouseup", function() {
if (e.handle === "") {
$(this).removeClass("draggable")
} else {
$(this).removeClass("active-handle").parent().removeClass("draggable")
}
r.off("mousedown", function(e) {
e.preventDefault()
})
})
}
var repulseTop = function(bindings, heights) {
var lowerCoords = _.reduceRight(bindings, function(lowerCoords, binding, index) {
if (!lowerCoords.length) {
lowerCoords.unshift(binding);
} else {
lowerCoords.unshift(_.first(lowerCoords) - heights[index]);
}
return lowerCoords;
}, []);
var coords = _.reduce(lowerCoords, function(coords, lowerCoord, index) {
var offset;
if (!coords.length) {
offset = bindings[index] - lowerCoord;
coords.push(offset > 0 ? lowerCoord : bindings[index]);
} else if (index === (bindings.length - 1)) {
coords.push(lowerCoord);
} else {
offset = _.last(coords) + heights[index - 1] - lowerCoord;
if (offset === 0) {
coords.push(lowerCoord);
} else {
if (bindings[index] - lowerCoord > 0) {
coords.push(lowerCoord);
} else {
offset = Math.max(offset, bindings[index] - lowerCoord);
coords.push(lowerCoord + offset);
}
}
}
return coords;
}, []);
return coords;
};
var repulseBottom = function(bindings, heights) {
return _.reduce(bindings, function(coords, binding, index) {
if (!coords.length) {
coords.push(binding);
} else {
var maxPossibleOffset = _.last(coords) + heights[index - 1] - binding;
console.log(maxPossibleOffset)
maxPossibleOffset = maxPossibleOffset < 0 ? 0 : maxPossibleOffset;
coords.push(maxPossibleOffset + binding);
}
return coords;
}, []);
};
var repulse = function(bindings, heights, frozenElementIndex) {
console.log(bindings)
var topBindings = bindings.slice(0, frozenElementIndex + 1);
var topHeights = heights.slice(0, frozenElementIndex + 1);
var bottomBindings = bindings.slice(frozenElementIndex);
var bottomHeights = heights.slice(frozenElementIndex);
var topCoords = repulseTop(topBindings, topHeights);
var bottomCoords = repulseBottom(bottomBindings, bottomHeights);
console.log('TOP ' + topCoords);
console.log('BOTTOM ' + bottomCoords);
return topCoords.concat(bottomCoords.slice(1));
};
console.clear();
$(function() {
var start = -1000;
var end = 2600;
var oldCoords = [196, 350, 908, 1252, 2462];
var bindings = [178, 332, 354, 1234, 1718];
var heights = [93, 978, 348, (94), 108];
//[178, 526, 649, 1234, 2444]
// [178, 526, 1084, 1234, 2444]
var frozenIndex = 2;
var render = function() {
var coords = repulse(bindings, heights, frozenIndex);
$('body').empty();
// ruller
for (var i = start; i < end; i += 20) {
$('<div/>').css({
position: 'absolute',
left: 0,
top: -start + i + 'px',
width: i % 100 === 0 ? 60 : 40,
'color': i % 100 === 0 ? '#333' : '#aaa',
'border-top': (i % 100 === 0 ? '2px solid #333' : '1px solid #777')
})
.text(i)
.appendTo('body');
}
// bindings
bindings.forEach(function(b) {
$('<div/>').css({
position: 'absolute',
left: 130,
top: -start + b + 'px',
'color': '#f00',
'font-weight': 'bold',
width: 400,
'border-top': '1px solid #f00'
})
.text(b)
.appendTo('body');
});
// oldCoords
oldCoords.forEach(function(c) {
$('<div/>').css({
position: 'absolute',
left: 130,
top: -start + c + 'px',
'text-align': 'right',
'color': '#333',
'font-weight': 'bold',
width: 400,
'border-top': '1px solid #333'
})
.text(c)
.appendTo('body');
});
// coords
coords.forEach(function(c, ix) {
$('<div/>').css({
position: 'absolute',
left: 160 + (ix * 60),
top: -start + c + 'px',
'font-weight': 'bold',
height: heights[ix],
'box-shadow': '7px 7px 5px 0px rgba(50, 50, 50, 0.75)',
'background-color': (ix % 2 ? 'red' : 'green'),
'font-size': '14px'
})
.data('id', ix)
.draggable({
axis: 'y'
})
.one('mouseup', function() {
var $this = $(this);
var top = parseInt($this.css('top').replace('px', ''), 10);
var index = $this.data('id');
bindings[index] = top - - start;
frozenIndex = index;
render();
})
.html('b: ' + bindings[ix] + '<br/>h: ' + heights[ix] + '<br/>c: ' + c + '<br/> bot: ' + (c + heights[ix]))
.appendTo('body');
});
};
render();
});</script></body>
</html>
// Draggable Plugin
$.fn.draggable = function(e) {
var t = this;
var n = {
handle: "",
cursor: "move",
axis: null,
containParent: false
};
e = $.extend(n, e);
if (e.handle === "") {
var r = t
} else {
var r = t.find(e.handle)
}
return r.css("cursor", e.cursor).on("mousedown", function(t) {
if (e.handle === "") {
var n = $(this).addClass("draggable")
} else {
var n = $(this).addClass("active-handle").parent().addClass("draggable")
}
var i = n.css("z-index"),
s = n.outerHeight(),
o = n.outerWidth(),
u = n.offset().top + s - t.pageY,
a = n.offset().left + o - t.pageX;
var f = $(this).parent();
var l = f.width(),
c = f.height();
var h = parseInt(f.offset().left) + parseInt(f.css("padding-left").replace("px", "")),
p = h + l,
d = parseInt(f.offset().top) + parseInt(f.css("padding-top").replace("px", "")),
v = d + c;
n.css("z-index", 1e3).parents().on("mousemove", function(t) {
var f = t.pageY + u - s,
l = t.pageX + a - o,
c = null;
if (e.containParent === true) {
if (l < h) l = h;
if (l > p - o) l = p - o;
if (f < d) f = d;
if (f > v - s) f = v - s
}
if (e.axis == "x") {
c = {
left: l
}
} else if (e.axis == "y") {
c = {
top: f
}
} else {
c = {
left: l,
top: f
}
}
$(".draggable").offset(c);
$(".draggable, html").on("mouseup", function() {
n.parents().off("mousemove");
$(r).removeClass("draggable").css("z-index", i)
})
});
t.preventDefault()
}).on("mouseup", function() {
if (e.handle === "") {
$(this).removeClass("draggable")
} else {
$(this).removeClass("active-handle").parent().removeClass("draggable")
}
r.off("mousedown", function(e) {
e.preventDefault()
})
})
}
var repulseTop = function(bindings, heights) {
var lowerCoords = _.reduceRight(bindings, function(lowerCoords, binding, index) {
if (!lowerCoords.length) {
lowerCoords.unshift(binding);
} else {
lowerCoords.unshift(_.first(lowerCoords) - heights[index]);
}
return lowerCoords;
}, []);
var coords = _.reduce(lowerCoords, function(coords, lowerCoord, index) {
var offset;
if (!coords.length) {
offset = bindings[index] - lowerCoord;
coords.push(offset > 0 ? lowerCoord : bindings[index]);
} else if (index === (bindings.length - 1)) {
coords.push(lowerCoord);
} else {
offset = _.last(coords) + heights[index - 1] - lowerCoord;
if (offset === 0) {
coords.push(lowerCoord);
} else {
if (bindings[index] - lowerCoord > 0) {
coords.push(lowerCoord);
} else {
offset = Math.max(offset, bindings[index] - lowerCoord);
coords.push(lowerCoord + offset);
}
}
}
return coords;
}, []);
return coords;
};
var repulseBottom = function(bindings, heights) {
return _.reduce(bindings, function(coords, binding, index) {
if (!coords.length) {
coords.push(binding);
} else {
var maxPossibleOffset = _.last(coords) + heights[index - 1] - binding;
console.log(maxPossibleOffset)
maxPossibleOffset = maxPossibleOffset < 0 ? 0 : maxPossibleOffset;
coords.push(maxPossibleOffset + binding);
}
return coords;
}, []);
};
var repulse = function(bindings, heights, frozenElementIndex) {
console.log(bindings)
var topBindings = bindings.slice(0, frozenElementIndex + 1);
var topHeights = heights.slice(0, frozenElementIndex + 1);
var bottomBindings = bindings.slice(frozenElementIndex);
var bottomHeights = heights.slice(frozenElementIndex);
var topCoords = repulseTop(topBindings, topHeights);
var bottomCoords = repulseBottom(bottomBindings, bottomHeights);
console.log('TOP ' + topCoords);
console.log('BOTTOM ' + bottomCoords);
return topCoords.concat(bottomCoords.slice(1));
};
console.clear();
$(function() {
var start = -1000;
var end = 2600;
var oldCoords = [196, 350, 908, 1252, 2462];
var bindings = [178, 332, 354, 1234, 1718];
var heights = [93, 978, 348, (94), 108];
//[178, 526, 649, 1234, 2444]
// [178, 526, 1084, 1234, 2444]
var frozenIndex = 2;
var render = function() {
var coords = repulse(bindings, heights, frozenIndex);
$('body').empty();
// ruller
for (var i = start; i < end; i += 20) {
$('<div/>').css({
position: 'absolute',
left: 0,
top: -start + i + 'px',
width: i % 100 === 0 ? 60 : 40,
'color': i % 100 === 0 ? '#333' : '#aaa',
'border-top': (i % 100 === 0 ? '2px solid #333' : '1px solid #777')
})
.text(i)
.appendTo('body');
}
// bindings
bindings.forEach(function(b) {
$('<div/>').css({
position: 'absolute',
left: 130,
top: -start + b + 'px',
'color': '#f00',
'font-weight': 'bold',
width: 400,
'border-top': '1px solid #f00'
})
.text(b)
.appendTo('body');
});
// oldCoords
oldCoords.forEach(function(c) {
$('<div/>').css({
position: 'absolute',
left: 130,
top: -start + c + 'px',
'text-align': 'right',
'color': '#333',
'font-weight': 'bold',
width: 400,
'border-top': '1px solid #333'
})
.text(c)
.appendTo('body');
});
// coords
coords.forEach(function(c, ix) {
$('<div/>').css({
position: 'absolute',
left: 160 + (ix * 60),
top: -start + c + 'px',
'font-weight': 'bold',
height: heights[ix],
'box-shadow': '7px 7px 5px 0px rgba(50, 50, 50, 0.75)',
'background-color': (ix % 2 ? 'red' : 'green'),
'font-size': '14px'
})
.data('id', ix)
.draggable({
axis: 'y'
})
.one('mouseup', function() {
var $this = $(this);
var top = parseInt($this.css('top').replace('px', ''), 10);
var index = $this.data('id');
bindings[index] = top - - start;
frozenIndex = index;
render();
})
.html('b: ' + bindings[ix] + '<br/>h: ' + heights[ix] + '<br/>c: ' + c + '<br/> bot: ' + (c + heights[ix]))
.appendTo('body');
});
};
render();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment